To check colour contrast, measure the contrast ratio between text and its background and compare it with the WCAG thresholds: at least 4.5:1 for normal text and 3:1 for large text and for key interface components. Most failures are not exotic. They are pale grey text, coloured buttons with weak borders and text over photos.
The thresholds
Under WCAG 2.2 Success Criterion 1.4.3, Level AA, the W3C guidance requires:
- 4.5:1 for text and images of text.
- 3:1 for large-scale text.
Large-scale text means at least 18 point, or 14 point bold. The W3C converts this to roughly 24 CSS pixels, or about 18.5 pixels for bold. The thresholds are strict: a computed 4.499:1 fails. The W3C also warns that thin or unusual fonts may need more contrast than the ratio suggests, because thin strokes are harder to see.
Beyond text: buttons, borders and icons
Success Criterion 1.4.11, Non-text Contrast, requires 3:1 for the visual parts of interface components and meaningful graphics against adjacent colours. Points from the W3C page:
- If a control has visible text or a clear icon, it does not need a border. If a border is the only cue that something is a control, that border must meet 3:1.
- Focus indicators that you style must meet 3:1.
- State indicators such as selected or checked must also meet 3:1.
- Disabled controls are exempt.
- For gradients, test the least contrasting area.
The W3C’s own failing examples include a checkbox border at 2.7:1 on white, a text input with only a light grey border and pale yellow star ratings at 1.2:1 on white. The first two are plain design choices that many sites make.
What is exempt
Incidental text has no contrast requirement: inactive controls, purely decorative text, text nobody can see, and text inside a photo with significant other visual content. Logotypes are exempt too, though a low-contrast logo chosen only for design reasons is not exempt when it functions as a control. Do not stretch exemptions to cover body copy.
Common failures to look for
| Where it happens | Why it fails |
|---|---|
| Light grey body text or captions | Looks refined, can fall under 4.5:1 |
| Placeholder text as the only label | Pale by default, and disappears on typing |
| Text over photos or video | Contrast changes across the image |
| Brand colour buttons | White text on a mid-tone may fail |
| Form field borders | Often the only cue to the field boundary |
| Dark mode | Palette tuned for one theme only |
How to check
- Take the actual colours from the CSS, not from a screenshot. Compression shifts values.
- Use a contrast checker that reports the WCAG ratio for foreground and background hex values, or the contrast tools built into browser developer tools.
- Test states: hover, focus, selected, error and disabled.
- Test text over images at the lightest and darkest part, or put a solid or semi-opaque panel behind the text.
- Test both themes if you offer dark mode.
- Fix in the palette, not page by page. Define accessible pairs as design tokens so every component inherits them.
Choosing palettes that pass
Contrast is easiest to get right at brand stage. Pick a text colour and a background pair that clear 4.5:1 comfortably, then test accent colours against both. A consistent identity works better when the same accessible pairs are used on every channel.
Contrast is one slice of WCAG. A passing ratio does not make text readable if the font size is tiny or the line length is extreme, and a ratio tool cannot judge those. Keep focus indicators in your checks too.
Where Radiance Impact fits
Radiance Impact’s Technology division builds and redesigns business websites, and checking contrast during design is part of building a site well. To talk about a project, contact us or see Technology.
