OATMEAL
Search
K

Color Contrast Analyzer

Prerequisites

Abilities

The following abilities are essential to perform this method.
  • Sight

Steps

  1. 1.
    Navigate to the page to test. In these instructions, we will be using www.ebay.com
    eBay Homepage
    • You will want to repeat this process for dialogs, flyouts, and other Views of the page
  2. 2.
    Activate the Color Contrast Analyzer tool and select Options
  3. 3.
    Set the following Color Contrast Analyzer Settings:
    • WCAG 2 Level: Level AA, Small Non-Bold Text (4.5:1)
    • Pixel Radius: 2
      Color Contrast Analyzer Options screen
  4. 4.
    Click Save & Close
  5. 5.
    Activate the Color Contrast Analyzer tool and select Capture Whole Page
    • A new tab will be opened in Chrome following the captured page
      Color Contrast Analyzer Icon with menu expanded
    • Note: This may take a few minutes to process
    • Feel free to experiment with the other Capture options
  6. 6.
    Once the scan has completed, you will see a masked version of the page.
    eBay Homepage masked
  7. 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.
    eBay Homepage masked - low contrast areas circled in pink
    • It may be useful to Hide and Show the Mask to verify text with poor contrast.
  8. 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

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