How to fix: Text must have enough colour contrast
Text needs to contrast with its background so people with low vision can read it. The minimum is 4.5:1 for normal text and 3:1 for large text.
The fix
Increase the contrast between text and its background to at least 4.5:1 (3:1 for large text).
Who this affects
Someone with reduced acuity or contrast sensitivity reads low-contrast text as a grey smear and gives up on it; the W3C's Understanding document cites 20/40 as typical acuity at around age 80. People with a colour vision deficiency gain nothing from hue here: the same document notes that hue and saturation have minimal effect on legibility, so the ratio is measured on light and dark alone. The same text also drops out for anyone reading on a phone in daylight or on a cheap laptop panel.
Before and after
.muted { color: #999; background: #fff; } /* 2.85:1 */.muted { color: #595959; background: #fff; } /* 7:1 */Where this usually comes from
- Grey helper and hint text: #999999 on white measures 2.85:1, against the 4.5:1 minimum for normal text.
- Bold text at 14px or 16px assumed to count as large, when the bold threshold is 18.66px (14pt) and the regular threshold is 24px (18pt).
- A brand colour that passes on white and fails once the same text sits on a tinted section or a coloured card.
- A muted look built from opacity or a semi-transparent rgba text colour; the composited result is what gets measured, not the declared colour.
- A dark theme where the background token was swapped but the text token was left at its light-mode value.
Checking it yourself
In Chrome DevTools select the text node and click the colour swatch beside the color declaration in the Styles pane: the picker shows the computed ratio with the AA and AAA lines marked. Firefox's Accessibility panel has a Check for issues, Contrast run that flags every failing node on the page in one pass. Text over a background image or a gradient cannot be measured that way and comes back as needing review rather than as a failure, so sample the pixels behind the text with an eyedropper and check the worst spot.
A scanner finds this one automatically. What it cannot judge, and how the score is built, is on how we test.
Related fixes
Check your site for this issue
Scan any page free against WCAG 2.2 AA and get every automatically detected issue with its fix.