Color Contrast Checker
Exact WCAG 2.2 contrast ratio for any color pair, AA/AAA verdicts for normal and large text, a live preview, and a suggested passing shade when you fail.
Normal text (16px): The five boxing wizards jump quickly.
Large text (24px bold): Pack my box.
How to use this tool
- Enter the text color and background color (HEX, or use the pickers).
- Read the exact contrast ratio and the AA/AAA verdicts for normal and large text.
- Failing? The suggested shade is your color nudged just far enough to pass AA.
How it works
The ratio is computed exactly as WCAG 2.2 defines it: each color's sRGB channels are linearized, combined into relative luminance (0.2126·R + 0.7152·G + 0.0722·B), and the ratio is (L₁ + 0.05) ÷ (L₂ + 0.05). Level AA requires 4.5:1 for normal text and 3:1 for large text (18pt/24px, or 14pt/18.5px bold); AAA requires 7:1 and 4.5:1. Thresholds are exact — 4.499:1 fails.
Contrast is about luminance, not hue: a red and a green of similar brightness can be indistinguishable to someone with color vision deficiency and still fail here. That's by design — WCAG contrast deliberately measures light-dark difference, which survives color blindness.
Sources & references
Content last reviewed: July 2026.
Frequently asked questions
What contrast ratio does WCAG require?
Level AA: 4.5:1 for normal text, 3:1 for large text (roughly 24px, or 18.5px bold). Level AAA raises those to 7:1 and 4.5:1. UI components and graphics need 3:1 under a separate criterion.
What counts as large text?
18pt (about 24px) regular, or 14pt (about 18.5px) bold. Large text gets the relaxed 3:1 threshold because bigger, thicker strokes stay readable at lower contrast.
My brand color fails — what now?
Use the suggested passing shade for text while keeping the original for large headings, logos (exempt), and decorative uses. Most brands survive a slightly darker text variant — ours did.