Color Contrast Analyzer

Prerequisites

Install Color Contrast Analyzer for Chrome

Abilities

The following abilities are essential to perform this method.

• Sight

Steps

1. 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

2. Activate the Color Contrast Analyzer tool and select Options

3. Set the following Color Contrast Analyzer Settings:

   • WCAG 2 Level: Level AA, Small Non-Bold Text (4.5:1)

   • Pixel Radius: 2

     

4. Click Save & Close

5. 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

6. Once the scan has completed, you will see a masked version of the page.

   

7. 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.

8. Create issues (see Text has poor contrast below) for each instance of text with low contrast.

Creating Issues

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.

Text has poor contrast

• 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)

  • It may be useful to include a contrast ratio which can be obtained using the Colour Contrast Analyser - Color Picker method

• Priority: P2

• Label or Tag: #a11y143

Exceptions

See Color and Color Contrast Testing Methods for Exceptions.

Knowledge

Checking Tips

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.

About

Author(s): Luis Garcia

Last Updated: 2017 April 07