Showit Accessibility: Color Contrast

This guide provides essential steps for checking and enhancing color contrast in Showit, ensuring your website is accessible to all users. Viewing this guide will empower you to create a more inclusive online presence, ultimately attracting a wider audience. We'll be using Chrome, a free Chrome extension, called Silktide, and Showit.

Christina Carrasquilla
22 steps
2 minutes

Showit

Silktide

Navigate to your website (here's my[demo page](https://brandgirlsdemo.com/))

Click on the Silktide Extension

Choose Color Contrast

Choose the foreground color picker and pick some text

Choose the background color picker and pick the color behind the text you just checked

Evaluate. Does it pass? If so, great! Test another foreground/background. If not, continue.

Open a new tab, log into Showit

Choose the color that needs to change

Since this is a designed button, click "Edit Defaults"

Click "Primary Button"

Click the text color

Choose the new color

Click "Save"

Click "Publish"

Click "Close"

Switch to tab with your website and refresh

Click on the Silktide extension

Choose color contrast

Choose the foreground color picker and pick the updated text

Choose the background color picker and pick the color behind that text.

You did it!

a cartoon of spongebob squarepants making a funny face with his hands over his head .