Colour and contrast
Text needs enough contrast against its background
- Rule:
color-contrast - Severity: Serious
- WCAG level AA
Why it matters
Low-contrast text is unreadable for people with reduced vision, on a phone in sunlight, or on a cheap monitor. This is the single most common failure on the web.
How to fix it
- Bring normal text to at least 4.5:1 against its background, and large text (24px, or 19px bold) to 3:1.
- Darken the text rather than lightening the background where brand colours are fixed.
- Check the state colours too — placeholder, disabled-looking but active, and text over images.
In markup
.note { color: #9a9a9a; background: #ffffff; } /* 2.6:1 */.note { color: #595959; background: #ffffff; } /* 7:1 */What the check cannot tell you
The engine skips text it cannot measure: over a gradient, over an image, or with a partly transparent background. Those need a human eye.
The requirement behind it
This rule is one way of failing the following WCAG 2.2 success criteria. The W3C, which writes the standard, explains each of them:
- 1.4.3 Contrast (Minimum) (opens in new tab) — WCAG level AA
Further reading
Deque University on color-contrast (opens in new tab)
Deque maintains axe-core, the open-source engine our scanner runs. Their page documents the rule as the engine implements it.
Automated checks find failures a browser can prove. They cannot judge whether a caption is accurate, whether an alt text is useful, or whether a page can be operated end to end with a keyboard — those need a person.