Color Contrast Analyzer
Last updated
Last updated
Install for
The following abilities are essential to perform this method.
Sight
Navigate to the page to test. In these instructions, we will be using www.ebay.com
You will want to repeat this process for dialogs, flyouts, and other Views of the page
Activate the Color Contrast Analyzer tool and select Options
Set the following Color Contrast Analyzer Settings:
WCAG 2 Level: Level AA, Small Non-Bold Text (4.5:1)
Pixel Radius: 2
Click Save & Close
Activate the Color Contrast Analyzer tool and select Capture Whole Page
A new tab will be opened in Chrome following the captured page
Note: This may take a few minutes to process
Feel free to experiment with the other Capture options
Once the scan has completed, you will see a masked version of the page.
Identify areas of text without white outline. These are areas of text with low contrast.
Don't forget to scroll through the entire page.
It may be useful to Hide and Show the Mask to verify text with poor contrast.
Create issues (see Text has poor contrast below) for each instance of text with low contrast.
Make sure to provide enough information to identify instances of text with poor contrast.
Your team may wish to list failures for all failings of a certain type of text (list text, navigation text, superscript text, etc.) in one issue.
Description: Text has poor contrast
Describe the type of text (ex. call to action button text has poor contrast) or use actual words as they appear on the page (ex. "THIS IS MORE THAN SUMMER SHOPPING" text has poor contrast)
Priority: P2
Label or Tag: #a11y143
If you're finding it difficult to Capture a particular View because of a hover state or some other reason, if you're able to take a screenshot of the View you want, you can open the image in Chrome and run Color Contrast Analyzer on the image instead of the page itself.
Author(s): Luis Garcia
Last Updated: 2017 April 07
It may be useful to include a contrast ratio which can be obtained using the method
See for Exceptions.
