Colour Contrast Analyser - color codes
Prerequisites
Install Colour Contrast Analyser for either Windows or Mac OS X.
This method assumes you have two hex color codes.
Steps
Launch Colour Contrast Analyser
Enter a color code into the Foreground Colour field for the text you're analyzing
Enter a color code into the Background Colour field for the background of the text you're analyzing
Verify that for Normal Text, you have a Pass (AA)
See Tool Interface section below for reference images
If the text you're checking does not Pass (AA) for Normal Text, create an issue (see Text has poor contrast below).
Tool Interface
1 - Foreground Color Code
2 - Background Color Code
3 - Foreground Color Picker
4 - Background Color Picker
5 - Normal Text Pass/Fail indicator
Windows Interface
Mac OS X Interface
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)
Since you have the color codes, it may be useful to provide that information as well (ex. light grey text (#777777) has poor contrast with its white background (#FFFFFF)
Priority: P2
Label or Tag: #a11y143
Exceptions
See Color and Color Contrast Testing Methods for Exceptions.
Knowledge
Getting Hex Value of Text on the Page
Coming soon.
About
Author(s): Luis Garcia
Last Updated: 2017 April 07
Last updated