WCAG contrast ratios, minus the spec-speak

WCAG 2.x grades text legibility with a contrast ratio from 1:1 (invisible, white on white) to 21:1 (black on white). The math is precise: each sRGB channel is linearized, weighted into a relative luminance (green counts for 71.5%, red 21.3%, blue 7.2%), and the ratio is (L1 + 0.05) / (L2 + 0.05), lighter over darker. A WCAG contrast checker is only trustworthy if it implements exactly this formula — this one matches the spec's 0.03928 linearization threshold, the same value WebAIM's checker uses.

The thresholds: AA requires 4.5:1 for normal text and 3:1 for large text; AAA raises the bar to 7:1 and 4.5:1. Separately, Success Criterion 1.4.11 demands 3:1 for non-text UI: icon glyphs, focus indicators, input borders and control boundaries. Large text means 18pt (24px) or larger, or 14pt (≈18.66px) or larger when bold — bigger glyphs stay legible at lower contrast, which is why the threshold relaxes.

Open the free Color Contrast Checker — no signup, runs entirely in your browser.

How to use it

  1. Enter a foreground (text or icon) color and a background color — HEX, RGB, HSL, HWB or a CSS keyword all work.
  2. Read the exact ratio and the five pass/fail badges: AA/AAA normal, AA/AAA large, and non-text UI.
  3. Check the live preview: your pair rendered as normal body text and as large bold text.
  4. Nudge either color with the picker until the badges you need turn green.

Why this one

  • Honest grading: badges are computed on the unrounded ratio, so 4.4976 displays as 4.50:1 but still fails AA — exactly as the spec demands.
  • All five thresholds in one view, with large text explained inline (≥18pt / 14pt bold).
  • Translucent colors are rejected with a clear error instead of being silently composited — WCAG contrast is defined for opaque colors only.
  • Converting a color between notations, or checking it against plain black/white? That is the Color Converter's job — linked from the tool.

Frequently asked questions

What contrast ratio do I need for WCAG AA?

4.5:1 for normal body text, 3:1 for large text (18pt/24px or 14pt/18.66px bold and up), and 3:1 for non-text UI elements like icons and input borders under SC 1.4.11. If you only remember one number, make it 4.5:1 — it covers body copy, which is where failures hurt most.

Why does 4.50:1 sometimes fail AA?

Because the displayed ratio is rounded to two decimals but the threshold check is not. A true ratio of 4.4976 rounds up to a display of 4.50:1 while still sitting below the 4.5 requirement. Checkers that grade on the rounded value would wrongly pass it; this one grades on the exact value, like the spec requires.

Why are translucent colors rejected instead of checked?

WCAG contrast is defined for opaque colors only — the ratio formula takes solid sRGB values. A 50%-alpha black could land on any background behind it, so its 'true' contrast is unknowable from the color alone. Silently compositing over an assumed background would hand you a confidently wrong answer, so the checker asks for the solid equivalent instead.

Is this the same as the contrast feature in the Color Converter?

No — different intent. The Color Converter shows how one color contrasts against pure black and pure white as a reference while you convert notations. This checker measures your actual foreground/background pair against all five WCAG thresholds, with a live text preview. Use the Color Converter for notation juggling, this one for accessibility sign-off.