SNHU Instructional Support Services

How to Check Color Contrast with A11Y

Updated

This can only be used on Google Chrome and on the website and not on the desktop. There is an article on how to use a different color contrast analyzer tool that would require download and have the freedom to use anywhere. The article can be found here: How to Check Color Contrast with Colour Contrast Analyser (CCA)

You are Going to Need to Add Color Pick Eyedropper

Open the following link to bring you right to the Chrome store to add ColorPick Eyedropper: ColorPick Eyedropper Chrome extension.

Select "Add to Chrome."

Google Chrome store page for the ColorPick Eyedropper.  The "add to chrome" button boxed in red.

Select "Add extension."

Confirmation to add the ColorPick Eyedropper. The "add extension" button boxed in red.

It will appear near your address bar.

Chrome address bar and the newly added extension. The A11Y color wheel "boxed in red.

Open the following link to bring you right to color contrast checker tool A11Y: A11Y color contrast checker tool.

Now You can Use the Color Contrast Checker Tool. Following these Steps to Use The A11Y tool.

Go to the colors that you want to test.

Select the ColorPick Eyedropper icon from the tool bar.

The eye dropper for the ColorPick Eyedropper.

1.) Select one of the colors.

Picking the one of the needed colors to be tested.

2.) Copy and paste the number.

The color number of the previous picture.

3.) Paste the number into ether background or foreground on A11Y.

The A11Y testing website.

4.) Repeat steps 1-3 for additional the ether background or foreground.

5.) Select "Test Colors."

The "Test Colors" button.

6.) Repeat steps for any additional foreground and background colors.

The results from the test.

This is an example of what would be the foreground color and what would be the background color. This image has two background colors and one foreground color.

You may have a hard time finding two-color that pass all five criteria, so it would be best to get as many as you can but aim for all five passing.

To View and Listen to a Video Tutorial:

Select the link below to view additional resources:

How-to Video for Checking Color Contrast with A11Y (00:01:37)

Previous Article Dragon Naturally Speaking Software Is Not Capturing or Saving Text
Next Article How to Check Color Contrast with Colour Contrast Analyser (CCA) (On Mac)