Design
Accessible Color Contrast, Explained
It’s the most common automatable WCAG failure and pure math under the hood. Here are the ratios, the rules, and how to fix it.
Color contrast is the difference in brightness between text and its background. Get it wrong and text becomes hard or impossible to read for users with low vision, color blindness, or anyone on a phone in sunlight. It’s also one of the most common — and most automatable — WCAG failures, which makes it a favorite of both accessibility scanners and the plaintiff firms that use them. The good news: it’s pure math, and our contrast checker does it for you.
Why contrast matters
Roughly 1 in 12 men and 1 in 200 women have some form of color vision deficiency, and a far larger group has reduced contrast sensitivity that grows with age. Low-contrast text — light gray on white is the classic offender — quietly excludes a big slice of your audience and tanks readability for everyone on a bright screen.
The WCAG ratios you need to hit
WCAG expresses contrast as a ratio from 1:1 (no contrast) to 21:1 (black on white). The thresholds:
| Content | Level AA | Level AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
| UI components & graphics (1.4.11) | 3:1 | — |
4.5:1 for normal text is the number to remember — it’s the AA legal target under the ADA and EAA.
Contrast is calculated, not eyeballed
The ratio is computed from the relative luminance of the two colors — you can’t reliably judge it by eye. Paste your hex values into the checker and it tells you the exact ratio and pass/fail.
What counts as “large text”?
WCAG defines large text as 18pt (24px) or larger, or 14pt (≈18.66px) bold or larger. Large text gets the easier 3:1 threshold because bigger letterforms remain legible at lower contrast. Anything smaller must hit 4.5:1.
Buttons, icons & focus states (1.4.11)
Contrast isn’t just about text. WCAG 2.1 added 1.4.11 Non-text Contrast: interactive components and meaningful graphics need 3:1 against adjacent colors. That means:
- A button’s edge or fill must be distinguishable from the page background.
- Form-field borders need 3:1 so users can find the input.
- Focus indicators (the outline on the keyboard-focused element) must meet 3:1 — a faint outline fails.
- Icons and chart segments that carry meaning need 3:1.
How to fix failing contrast
- Darken the text or lighten the background until you clear 4.5:1. The checker shows the live ratio as you adjust.
- Don’t rely on color alone. WCAG 1.4.1 means links, errors, and states need a second cue (underline, icon, text) — not just a hue.
- Watch your “muted” grays. Placeholder text, captions, and disabled-looking labels are the usual failures. Bump them up.
- Define accessible color tokens in your design system so new components inherit passing combinations by default.
- Re-check after every redesign. A brand refresh is the most common way passing contrast silently breaks.