Southern New Hampshire University

Southern New Hampshire University  /  Accessibility and Assistive Technology  /  Color and Contrast

A11Y Color Contrast Checker

Updated on

Color Contrast refers to how bright or dark colors appear against each other on screens, particularly about the relative gray-scale luminosity perceived by the human eye.

The contrast between the text and the text background concerns colorblindness and other visually impaired users.

 A11Y Color Contrast Accessibility Validator is a free background and foreground color checker. This is available via your Google Chrome browser. If you are interested in other color contrast analyzer tools that you can download to your computer, visit the article: How to Check Color Contrast with Colour Contrast Analyser (CCA)

How to Add Color Pick Eyedropper

The Color Picker (Eyedropper) is a chrome extension that easily lets you identify the Hex color code of any user interface (UI) element you hover your mouse over. It's great for quick access to colors you gain inspiration from when browsing online.

Open the following link to the Chrome store and add the 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 the A11Y color contrast checker tool.

How to begin using the Color Contrast Checker Tool.

Go to the colors that you want to test. Select the ColorPick Eyedropper icon from the toolbar on your Chrome browser.

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 the number that the ColorPick gives you.

The color number value of the previous picture.

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

Example of how to determine background and forground colors.

3.) Paste the number into either the background color box or foreground color box on A11Y depending on what it is.

The A11Y testing website with a hex color code in the foreground color box, highlighed in red.

4.) Repeat steps 1-3 for whichever one (background or foreground) you didn't do yet.

5.) Select "Test Colors."

The "Test Colors" button.

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

A screenshot of the color contrast test showing the example colors passed.

For additional resources, visit:

Select the link below to view additional resources:

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

Previous Article Color Contrast Information and Tools
Next Article Colour Contrast Analyser (CCA)

Accessibility and Assistive Technology

Need More Help? 2
Overviews of Accessibility Settings (Windows and Mac) 2
Employee-Facing Support and Services 3
Web Accessibility Testing 5
Accessible Documents and Emails 13
Speech Recognition (Speech-to-Text) 4
Color and Contrast 8
Keyboard Accessibility 2
Alternative Text 12
Accessible and Inclusive Environments (Virtual or In-person) 20
Accessible Spreadsheets, Tables, and Charts 10
Accessible Audio and Video 13
Page Structure 4
Vision Settings 2
Purposeful Hyperlinks 4
Reading Tools 15
Writing Tools 5
Math Tools 6
Logical Reading Order 2
Tasks and Organization 6
Older Operating Systems 6
Creating Accessible Job Aids in Screensteps 6
Creating Accessible Content in Venngage 1

Other Resources

Print Article