Guide
Color contrast requirements, explained
Last updated: 29 June 2026
Low-contrast text — light grey on white, pale text on a busy photo — is one of the most common accessibility failures, and one of the most impactful: it affects anyone with low vision, anyone on a phone in bright sunlight, and a lot of people as they age. WCAG sets measurable contrast minimums. Here's what they are and how to check yours.
The ratios you need to know
Contrast is measured as a ratio between the text color and its background, from 1:1 (no contrast) to 21:1 (black on white).
- Normal text — at least 4.5:1 (WCAG 1.4.3, Level AA).
- Large text — at least 3:1. "Large" means about 18.66px bold or 24px regular and up (roughly 14pt bold / 18pt).
- UI components & meaningful graphics — at least 3:1 against their surroundings — think input borders, icons, focus indicators, chart lines (WCAG 1.4.11, Non-text Contrast).
(Level AAA is stricter — 7:1 for normal text — but AA is the level laws and most organisations target.)
Things people get wrong
- Placeholder text as the only label — it's usually too light and disappears on input.
- Text over images or gradients — contrast varies across the image; add a scrim/overlay or a solid backing.
- Disabled-looking buttons that are actually active — if it works, it needs to meet contrast.
- Brand colors used for body text — a brand blue that looks fine for logos often fails at 14px on white.
- Link color that only differs from body text by hue — without enough contrast (or an underline), color-blind users can't tell it's a link.
Don't rely on color alone
Separately from contrast, never use color as the only way to convey information (WCAG 1.4.1). "Required fields are red," "errors are red," or a red/green status dot all fail for color-blind users unless you add a label, icon, or text too.
How to check your site
Contrast is one of the things automated tools check very well, because it's a pure calculation from the rendered colors. Scan your site free with WCAGwise to find every contrast failure on a page, with the exact element and the measured ratio so you know how far off it is. For a single color pair while designing, a contrast-ratio checker tells you pass/fail before you ship. Fix by darkening text, lightening backgrounds, or increasing size/weight. WCAGwise is an audit aid, not a legal guarantee.