Silktide Color Contrast Tool

Overview

• Color contrast is about how easy it is to tell the difference between the color of text and the background behind it.

Why color contrast matters

• It helps everyone read easily. Good color contrast makes it easier for readers to see what’s written—especially people who might not see colors the same way or have difficulties with their vision.
• It keeps readers comfortable. Poor contrast makes you work harder, and that can get tiring. With good contrast, reading feels smoother and more comfortable.

Using the Silktide extension color contrast tool 

To check headings within an article using the Silktide extension, follow the steps listed below:

• Note: if you do not have the Silktide extension downloaded, click here for instructions on downloading.

1. Open the desired page to test, then select Silktide's side tab to test. Note: If you need further instruction on this step, click here to learn how to open the extension tool. 
2. Open the color contrast tool in the menu. 
   
3. This will activate the tool. If you are using proper colors for text and background, it should pass the inspection. 
   

How can I manually test foreground and background color? 

1. To test font color, select Foreground.
2. This will activate a pixel view magnifier that you can move around the page. In the example below, a letter is being magnified that shows a black font color. 
   
3. Once the magnifier is hovered over the desired area, click to select the color. 
4. One a color is selected, the foreground button will change to the color selected. 
   
5. Next, choose the background color you wish to test using the same procedure. Select the Background box > hover over the page color > click to select the area to be tested.
   
6. In this example, the colors have passed Silktide's color contrast test: 
   

Example of a failed test

• In the scenario below, the foreground and background color contrast do not meet WCAG requirements which results in a fail status from Silktide:

Steps to improve accessibility with color contrast

• Use strong contrast, like dark text on a light background or light text on a dark background. Black on white works well. Pale gray or yellow on white does not.
• Think about colorblindness: Some people can’t tell red from green or blue from yellow. Don’t use color combinations that could be difficult to tell apart.
• Test It:  If you squint at the page, and the text disappears, your contrast is not good enough.