Goal
Ensure that no one is prevented from reading the site’s text because of the color of the text on its background.
Why this matters
Visual Disabilities vary widely in the way that color impacts their ability to see text. The contrast levels outlined for this guideline ensure that as many people as possible can read the text.
How to implement
Designer
Review Using color, specifically the part about readable color.
If testing 1.4.3 Contrast (Minimum) – Level AA:
- Small text (14 points / 19px) must be at a 4.5:1 ratio to its background.
- Large text (18 points / 24px) must be at a 3:1 ratio to its background.
If testing 1.4.6 Contrast (Enhanced) – Level AAA:
- Small text (14 points / 19px) must be at a 7:1 ratio to its background.
- Large text (18 points / 24px) must be at a 4.5:1 ratio to its background.
Developer
Ensure you’re using the Designer’s defined colors.
How to test
If either the text or the background color is using opacity, you’ll need a way to figure out what the actual hex codes are with the opacity in effect. Sampling with a third-party application is usually faster than finding two or three calculators to string together for valid results.
- Inspect the text using the browser’s developer tools.
- Inspect the background behind the text using the browser’s developer tools.
- Compare the hex color of the text to the hex color of the background using one of the tools on the List of Contrast Checkers.