WCAG & Testing
WCAG Color Contrast Requirements in Plain English
Contrast is the most common accessibility failure on government websites, and the easiest to prevent. The rule is arithmetic, not taste: normal text needs a contrast ratio of at least 4.5:1 against its background, and large text needs 3:1.
Sources
Key takeaways
- 4.5:1 for normal text is success criterion 1.4.3, Level AA.
- 3:1 for large text: 18pt and over, or 14pt and over when bold.
- 3:1 for the non-text parts too: button borders, form field outlines, focus rings and meaningful icons, under 1.4.11.
- Contrast is machine-testable: this is one of the few criteria a scanner judges reliably, so there is no excuse for it surviving to a deadline.
What are the WCAG color contrast requirements exactly?
Success criterion 1.4.3 Contrast (Minimum) requires 4.5:1 for normal text and 3:1 for large text. Large means at least 18 point, or at least 14 point if the text is bold. Logotypes and text that is purely decorative are exempt, as is text in an inactive control.
In detail
The ratio compares the relative luminance of the two colors, so it is not the same as how different they look to you on a bright monitor. Light gray on white is the classic failure: it reads as tasteful restraint in a design review and fails the arithmetic. Placeholder text inside form fields fails constantly for the same reason.
Which parts of a page other than text need contrast?
Criterion 1.4.11 Non-text Contrast requires 3:1 for the visual information needed to identify a control or its state, and for parts of graphics you need in order to understand them. In practice that means the outline of a text input, the edge of a button, the focus indicator that shows where the keyboard is, a required-field marker, and the slices of a chart that carry meaning.
In detail
Focus indicators are the one people forget. A keyboard user who cannot see which element is focused is navigating blind, and a faint one-pixel outline in a pale color fails both the criterion and the user. The related criterion 1.4.1 Use of Color adds that color must never be the only way information is conveyed, so a form that marks errors in red alone fails even if the red passes contrast.
Where does contrast usually break on a government site?
Four places, in our experience. Pale placeholder text in search and form fields. Light gray helper text under inputs and in footers. Brand colors used for body links, where a mid-tone blue or orange passes against white in the designer's eye but not in the arithmetic. And status badges, where white text sits on a brand yellow or light green.
In detail
There is a planning trap worth naming. Contrast failures usually live in a theme or a design system rather than in a page, so one fix can clear hundreds of findings at once, and one theme update can bring them all back. That is the regression pattern monthly monitoring exists to catch, and it is why a single pre-deadline audit tends to age badly.
How should a team handle contrast before a deadline?
Fix it at the source. Decide the accessible values once, record them as the official palette with their ratios written down, and have every new component checked against that palette rather than against somebody's judgement. Then test the live pages, because a palette that is correct on paper still fails where a component overrides it.
Contrast appears in the full WCAG 2.1 AA checklist alongside the other 49 required checkpoints, and it is part of every initial assessment.