Contrast (Minimum)
Text needs enough contrast against its background to be readable — at least 4.5:1 for normal text, 3:1 for large text.
What it means
This is a straight math requirement: take the brightness of the text color and the brightness of whatever's behind it, and the ratio between them has to clear a minimum. Regular-sized text needs at least a 4.5-to-1 ratio; text that's large (about 24px, or around 19px if it's bold) only needs 3-to-1, since bigger text is inherently easier to make out.
Why it matters
Low contrast doesn't just affect people with diagnosed vision impairments — it affects anyone reading on a cheap monitor, in bright sunlight, or simply getting older (contrast sensitivity declines with age for almost everyone). Light gray text on a white background might look stylish; for a lot of real visitors it's just illegible.
What our scan checks for
- The actual rendered text color and background color of elements on the page (computed after CSS is applied, via a headless browser — this can't be determined from raw HTML alone), compared against the 4.5:1 / 3:1 thresholds.
How to fix it
- Darken the text, lighten the background, or both, until the ratio clears the threshold for that text size.
- Run your brand colors through a contrast checker before you commit to a palette — some popular "muted" color pairings fail this outright.
- Pay particular attention to placeholder text, disabled-looking buttons, and light-gray "secondary" text — they're the most common offenders.
See where this shows up on your site
Run a free scan to check your pages against this and every other criterion we cover.
Scan a website free