Color Contrast Checker
Test any text and background color pair against WCAG AA/AAA and get a passing color suggested automatically.
About this tool
What this tool does
Pick a text color and a background color and this checker calculates the exact WCAG contrast ratio between them, then tells you whether that pair passes AA and AAA accessibility guidelines for both normal and large text. If it fails, the tool automatically suggests the closest shade of your text color that would pass.
Who it's for
Designers and developers building accessible interfaces, anyone reviewing a color palette before shipping a design, or content creators checking whether a text/background combo on a slide or graphic is actually readable for people with low vision.
How to use it
- Enter a hex code or use the color picker for your text color and background color.
- Watch the live preview box update with your actual colors, and read the contrast ratio and pass/fail badges update instantly.
- Use the swap button to flip text and background, or click "Use this color" on a failing pair to auto-apply a passing shade.
Real-world examples
Light gray text (#999999) on a white background often fails AA for normal text even though it looks fine at a glance — this tool catches that before it ships. A brand's signature blue-on-white combo might pass AA but fail the stricter AAA level used for maximum accessibility content.
Frequently asked questions
What contrast ratio do I need for WCAG AA?
4.5:1 for normal text, and 3:1 for large text (18pt+/24px+, or 14pt/19px+ bold). This is the level most accessibility audits and legal requirements check against.
What's the difference between AA and AAA?
AAA is the stricter, optional standard — 7:1 for normal text and 4.5:1 for large text. AA is the baseline most sites aim for; AAA is recommended for critical content.
How is the contrast ratio actually calculated?
It's based on the relative luminance of both colors using the WCAG formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker one's.
Why does my color combo look fine but still fail?
Human eyes are surprisingly bad at judging contrast, especially with mid-tone grays and saturated colors — a ratio calculation catches what a quick glance misses, which is exactly why WCAG defines numeric thresholds instead of leaving it to judgment.
Does this work for color-blind accessibility too?
Contrast ratio and color-blind-safe design are related but different checks — this tool covers luminance contrast (WCAG 1.4.3), which benefits low-vision users broadly, including many forms of color blindness, but doesn't replace a dedicated color-blindness simulator.