Free WCAG Color Contrast Checker

Pick a text and background color to see the contrast ratio, a live sample, and pass/fail results for every WCAG level.

4.54:1
contrast ratio

Normal text — the quick brown fox jumps over the lazy dog.

Large text — 18pt and up.

  • AA — normal textratio ≥ 4.5
    Pass
  • AA — large text≥ 18pt (or 14pt bold), ratio ≥ 3
    Pass
  • AAA — normal textratio ≥ 7
    Fail
  • AAA — large textratio ≥ 4.5
    Pass
  • UI components & graphicsWCAG 1.4.11, ratio ≥ 3
    Pass

How to use / FAQ

Pick or paste a text color and a background color — hex, rgb(), and hsl() all work — and the ratio, live sample, and WCAG pass/fail results update instantly. The swap button flips the pair, which is handy for checking dark-mode variants of the same palette.

What contrast ratio do I need?

WCAG AA — the level most laws and audits reference — requires 4.5:1 for normal text and 3:1 for large text. The stricter AAA level asks for 7:1 and 4.5:1 respectively, and non-text things like input borders and icons need 3:1 under criterion 1.4.11.

What counts as "large text"?

18pt (about 24px) and up at normal weight, or 14pt (about 18.7px) and up if bold. Everything smaller is judged by the stricter normal-text thresholds — which is why light gray body copy fails so often.

How is the ratio calculated?

From the WCAG relative-luminance formula: each color's luminance is computed from linearized sRGB channels, then the ratio is (lighter + 0.05) ÷ (darker + 0.05). It ranges from 1:1 (identical colors) to 21:1 (black on white). Order doesn't matter — text on background scores the same as background on text.

Why does the displayed ratio look like it meets the threshold but still fails?

It can't here — this tool truncates the displayed ratio instead of rounding it, so a shown 4.50:1 genuinely passes 4.5. Tools that round up can display 4.5 for a true ratio of 4.4986, which fails; if two checkers disagree at the boundary, that's usually why.

Does contrast checking cover all accessibility requirements?

No — it's one criterion among many. Color contrast says nothing about focus states, keyboard access, or relying on color alone to convey meaning. It is, however, the most commonly failed check in audits, so it's a high-value place to start. To translate a color between HEX, RGB, and HSL while you tweak it, use the color converter.