Color Contrast Checker
Pick a text color and a background color — get the WCAG contrast ratio and instant AA/AAA verdicts.
The quick brown fox jumps over the lazy dog
Large text sample (24px+)
Contrast results
How to use the color contrast checker
- Pick a text color and a background color with the color pickers.
- Read the contrast ratio and the four WCAG verdicts instantly.
- Check the live preview to see how the pairing actually looks.
- Adjust until normal text passes AA at minimum.
Contrast and accessibility tips
The WCAG contrast ratio runs from 1:1 (invisible — same color) to 21:1 (black on white). Level AA, the legal standard referenced by most accessibility laws, requires 4.5:1 for normal text and 3:1 for large text (18pt/24px or 14pt bold and up). AAA is stricter at 7:1 and 4.5:1. The most common failures are light gray body text on white and white text on brand-color buttons — both usually land around 2–3:1. When a pairing fails, darken the text or the background rather than nudging slightly; small tweaks rarely cross the threshold. Remember that contrast is about luminance, not hue: bright red on bright green can fail despite looking vivid to most eyes.
Frequently asked questions
What is a good contrast ratio?
4.5:1 or higher for normal text meets WCAG AA, the widely adopted standard. 7:1 meets AAA.
What counts as large text?
Text at least 18pt (24px), or 14pt (about 19px) bold and larger. Large text has the lower 3:1 AA bar.
Does this check color blindness?
No — it checks luminance contrast only. Pair it with a color blindness simulator for full coverage.
Why do my brand colors fail?
Brand palettes are chosen for identity, not readability. Keep brand colors for large elements and use a darker variant for text.