What is WCAG contrast ratio?
WCAG (Web Content Accessibility Guidelines) contrast ratio is a numeric measure of how visually distinct text is from its background. The World Wide Web Consortium introduced it as part of WCAG 2.0 and refined it in WCAG 2.1 to make the web more readable for people with low vision, colour blindness, or age-related sight loss.
The ratio runs from 1:1 (no contrast — invisible text on a matching background) to 21:1 (black text on white, the theoretical maximum).
How is it calculated?
The formula compares the relative luminance of the foreground colour against the background colour:
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
Where L1 is the relative luminance of the lighter colour and L2 is the luminance of the darker one. Luminance itself is derived from the linearised RGB values of a colour — which is why a hex code like #767676 grey on white lands almost exactly at the AA threshold of 4.5:1.
You don't need to do this maths by hand. Our free WCAG Contrast Checker calculates it instantly for any foreground and background pair.
AA vs AAA: what are the levels?
WCAG 2.1 defines two conformance levels for contrast:
Level AA (minimum standard)
- Normal text (under 18pt or 14pt bold): 4.5:1
- Large text (18pt+ or 14pt+ bold): 3:1
- UI components and graphical objects: 3:1
Level AAA (enhanced standard)
- Normal text: 7:1
- Large text: 4.5:1
Most product teams target AA as the baseline. AAA is worth pursuing for body text on public-facing products where readability matters most — documentation sites, government services, healthcare tools.
The most common failures
1. Light grey body text
Designers often reach for #999999 or #aaaaaa to create hierarchy. Both fail AA on a white background. Use #767676 as the minimum for regular-weight body text.
2. Low-contrast call-to-action buttons
Orange, yellow, and light green CTAs are frequent offenders. A warm orange like #ff7a3c on white produces roughly 3.2:1 — eye-catching, but below the 4.5:1 AA threshold for the button label. Darkening to #d94f00 brings it into compliance without losing the brand feel.
3. Placeholder text in form fields Browser default placeholder colour is typically around 40% opacity grey — often below 3:1 even on a white input background. Treat placeholder text like real text and check its contrast explicitly.
4. Text on gradient backgrounds A gradient may pass contrast at the darkest point and fail at the lightest. You need to check the worst-case position, not just the dominant colour.
5. Disabled states WCAG explicitly exempts disabled UI components from contrast requirements, but many teams skip contrast entirely for interactive states that aren't technically disabled — like secondary buttons or inactive tabs that users can still click.
How to check and fix contrast quickly
The fastest route: paste your colours into the free WCAG Contrast Checker at UXNext. It shows the ratio, AA/AAA pass/fail at every text size, and suggests adjusted colours that bring you into compliance without wrecking your palette.
For systematic coverage, audit your design tokens — not individual components. If your grey scale has a compliant body-text colour baked in, every component that uses it inherits the fix automatically.
Accessibility is not a final-pass checklist item. Build contrast checking into your token decisions early and you'll rarely need to retrofit it later.