Colour · 02 of 04
Make contrast measurable
Check text against its actual background, including interactive states.
The idea
For WCAG 2.2 Level AA, normal text needs a contrast ratio of at least 4.5:1.
Large text needs at least 3:1: 18pt regular or 14pt bold, approximately 24 or 18.7 CSS pixels. The criterion includes exceptions, such as inactive controls and logotypes; it is not a single threshold for every visible mark.
Check the foreground and background colours used in the finished page, including placeholders and hover states. Over an image, the background can vary behind each word. A stable backing can help. Passing a ratio is a baseline: also review the type size, stroke strength and actual reading conditions. The W3C guidance linked below explains the requirements and exceptions.
How to see it
Terms used in this lesson
The parts
- Contrast ratio
- A measure comparing the relative luminance of two colours.
- Large text
- For WCAG minimum contrast, at least 18pt regular or 14pt bold.
- Backing
- A stable surface behind text that separates it from imagery.
In practice
- Measure actual text and background pairs
- Check interactive states and image backgrounds
- Review thin strokes at the delivered size
Avoid
- Rounding a failing ratio up to a pass
- Assuming every element uses the same threshold
- Using visual inspection as the only contrast check
The test
Check each text style in its real context. Record failing colour pairs, fix their shared styles, then review the affected screens again.
Use the Contrast Grid to check your text and background colours together and identify combinations that need adjustment.
Sources
- W3CWCAG 2.2 Success Criteria 1.4.3, 1.4.6 and 1.4.11 2023
- ISOISO 9241-3 visual display requirements 1992
- Josef AlbersInteraction of Color 1963
Reviewed against all forty, on your product.
The audit is the cheapest thing we sell, and it regularly concludes that you do not need the project you came for.