Low-contrast text is one of the most common accessibility failures on the web, and one of the easiest to prevent. It affects far more people than is usually assumed — not only users with visual impairments, but anyone reading on a phone in sunlight or on a poorly calibrated screen.
How to use the Contrast Checker
- Enter your foreground (text) colour
- Enter your background colour
- Read the ratio and which WCAG levels it passes
- Adjust lightness until you clear at least AA for the text size you are using
The thresholds
Contrast is expressed as a ratio from 1:1 (identical) to 21:1 (black on white).
- AA, normal text — at least 4.5:1. The baseline for body copy, and the level most legislation references.
- AA, large text — at least 3:1. Large means 18pt and up, or 14pt bold and up.
- AAA, normal text — at least 7:1. Enhanced; sensible for long-form reading.
- AAA, large text — at least 4.5:1.
- Non-text — at least 3:1 for UI components and meaningful graphics: form borders, icons, focus indicators.
That last one is widely missed. A form field whose border barely differs from the background fails, even when the label passes.
Where contrast quietly fails
Placeholder text. Almost always too light, and frequently used as the only label — which fails both contrast and labelling requirements at once.
Disabled states. Exempt from the WCAG ratios, but if a user cannot read the disabled control they cannot tell what is unavailable.
Text over images. The ratio changes across the image. A scrim or gradient overlay is the reliable fix.
Brand colours. Many brand palettes fail outright as text colours — mid-tone oranges and yellows especially. Use them for large display text, accents and backgrounds rather than body copy, or darken a variant specifically for text.
Bear in mind the formula measures relative luminance, not perceived brightness. A pair can pass numerically and still read poorly, particularly with saturated colours. Test with real content.
Frequently asked questions
What contrast ratio do I actually need?
4.5:1 for normal body text, 3:1 for large text, under WCAG AA. That is the level most accessibility legislation references, including the ADA in practice and the European Accessibility Act.
Does this apply to buttons and icons too?
Yes. WCAG 2.1 requires 3:1 for non-text elements that convey meaning — form borders, focus rings, icon buttons. Text inside a button must also meet the text threshold against the button's own background.
Is white text on a brand colour usually accessible?
Often not. Mid-tone brand colours frequently land between 2:1 and 4:1 against white. Darken the background or use dark text instead — check rather than assume.
Why does a passing combination still look hard to read?
The formula measures relative luminance, which does not perfectly match perception. Saturated colours and thin fonts both read worse than their ratio suggests. Treat the threshold as a floor, not a target.