Colour contrast for websites: what the WCAG ratios mean in practice
Under WCAG 2.2 level AA, normal text needs a contrast ratio of at least 4.5:1 against its background, large text 3:1, and the parts of buttons, form fields and icons that people need to see 3:1. The ratios are strict thresholds: 4.49:1 fails. Here's how they apply to real pages in both light and dark themes.
What a contrast ratio measures
Colour contrast for websites is expressed as a ratio that compares the relative luminance of two colours: roughly, how much light each gives off, weighted for how the eye perceives red, green and blue. The result runs from 1:1 (identical colours) to 21:1 (black on white). Hue doesn't enter into it. A saturated red and a mid green can look completely different and still have almost the same luminance, which is why colour pairs that seem obviously distinct can fail.
The formula is set out in the WCAG 2.2 understanding document, and every contrast checker, including the one in your browser's developer tools, uses it. You never need to calculate it by hand; you do need to check the right pairs.
The thresholds that apply
| What | Level AA | Level AAA | Criterion |
|---|---|---|---|
| Body and normal-size text | 4.5:1 | 7:1 | 1.4.3 and 1.4.6 |
| Large text (24px regular, or about 18.7px bold) | 3:1 | 4.5:1 | 1.4.3 and 1.4.6 |
| Control boundaries, states and meaningful icons | 3:1 | 3:1 | 1.4.11 |
| Charts and graphics needed to understand content | 3:1 | 3:1 | 1.4.11 |
| Focus indicator against its unfocused state | No ratio at AA | 3:1 | 2.4.13 |
Level AA is the target most accessibility laws and procurement rules point to. A few things are exempt from the text requirements: logos and brand names, text that is purely decorative or part of a photograph, and controls that are disabled. Placeholder text inside a field is not exempt if it carries information, which is one more reason to put instructions in a proper label.
Pairs people forget to check
- Muted text. Captions, dates, form hints and footer links are usually set in a lighter grey, and it's the colour that fails most often. A grey of #767676 on white is about 4.54:1 and just passes; #999999 is about 2.85:1 and fails.
- Text on the action colour. White on a bright orange or yellow button often lands near 2:1.
- Form field borders. A pale grey outline on a white page can make the field itself invisible to someone with low vision. Under 1.4.11 the boundary needs 3:1, unless the field is identified some other way, such as a filled background that itself contrasts.
- Icons that carry meaning. A grey icon-only button, such as a close or menu button, needs 3:1 against its background.
- Text over photographs. Contrast changes across the image. Check the lightest area the text crosses, or put the text on a solid or scrimmed panel.
- Links inside paragraphs. If colour is the only thing that marks a link, it needs 3:1 against the surrounding text as well as 4.5:1 against the background. An underline avoids the problem.
Dark themes have their own traps
Dark themes aren't light themes inverted. Pure white text on pure black reaches 21:1, but many readers find it glaring, and thin strokes can appear to blur or bloom. An off-white on a very dark grey, still well above 7:1, is usually more comfortable. Muted text is the bigger risk: a grey that looked subtle on charcoal in a design file can drop below 4.5:1 on a real screen with the brightness turned down.
Accent colours shift too. A deep blue chosen for a cream background may manage only 2:1 on charcoal. Each colour that appears in both themes needs its own dark-theme value, checked separately. Treat the light and dark themes as two palettes that happen to share names, as described in dark mode website design.
A quick contrast routine
- List every text colour and every background it sits on, including surfaces, buttons and image areas.
- Check each pair against 4.5:1, or 3:1 for headings at large-text size.
- Check borders, icons and focus outlines against 3:1.
- Repeat the whole list for the dark theme.
- Look at the page on a phone in daylight at low brightness. Numbers can pass and still feel weak.
Where Anticode stands
Anticode's design systems set contrast in their colour tokens, for light and dark themes. Editorial's muted grey, for example, is about 6.2:1 on its paper-coloured ground, and Technical's muted text is about 6.3:1 on graphite. The eight action colours, in their light-theme values, all clear 5:1 against white. Themes can be Auto (the system's own palette), Light or Dark; Auto does not switch with the visitor's light or dark setting, so the palette you preview is the one visitors see.
The Critic's body-size check makes sure text isn't too small to read, which works alongside contrast. But the Critic doesn't check contrast, and nothing re-measures it after you edit a colour token: that check is yours, using the routine above. The AI website accessibility guide covers the other manual tests.
Questions people ask
What contrast ratio do I need for body text?
At least 4.5:1 for WCAG 2.2 level AA, and 7:1 for level AAA. Large text needs 3:1 at AA.
Do buttons need to meet contrast requirements?
Yes. The button's text needs 4.5:1 against the button, and the button's boundary, or whatever identifies it as a button, needs 3:1 against the page.
Is 4.4:1 close enough?
No. The thresholds are minimums and aren't rounded, so anything below 4.5:1 fails for normal text.
What about the newer APCA contrast method?
APCA is being explored for a future version of WCAG and models perception differently. Until it becomes a published requirement, WCAG 2.2's ratios are the ones laws and audits refer to.