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."
Select "Add extension."
It will appear near your address bar.
Once you have added the Chrome extension, go to the A11Y Color Contrast Accessibility Validator Website.
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.
1.) Select one of the colors.
2.) Copy the number that the ColorPick gives you.
Below is an example of what the foreground color and background color would be. This image has two background colors and one foreground color.
3.) Paste the number into either the background color box or foreground color box on A11Y depending on what it is.
4.) Repeat steps 1-3 for whichever one (background or foreground) you didn't do yet.
5.) Select "Test Colors."
6.) Repeat steps for any additional foreground and background colors.
For additional resources, visit:
- Accessibility Evaluation Tools - An Overview
- Color Contrast Checker
- Color-reliant Link Contrast Checker
- WAVE
- The Verge - Designing for Colorblindness
Select the link below to view additional resources:
How-to Video for Checking Color Contrast with A11Y (00:01:37)