Free Color Contrast Checker — WCAG AA & AAA Test
Pick any two colours and instantly check if they meet WCAG AA and AAA accessibility standards. Used by designers and developers worldwide to build accessible websites.
Design for everyone,
not just some.
Accessible design is good design. Test your colors before you ship to make sure every user can read your content clearly.
Why Contrast Matters
Good contrast ensures your content is readable by everyone, including people with low vision or color blindness. WCAG AA requires 4.5:1 for normal text.
Min 4.5:1 for normal text. Required for ADA compliance.
Min 7:1 for normal text. Best for maximum accessibility.
Palette Contrast Grid
Add your brand colors to check every combination at once.
Contrast Grid
Each cell shows the contrast ratio between the row and column color.
What Is a Color Contrast Checker and Why Does It Matter?
A colour contrast checker measures the luminance difference between a text colour and its background — expressed as a ratio like 4.5:1 or 7:1. This ratio tells you whether your text is readable by people with low vision, colour blindness, or in bright sunlight. Every web designer and developer should check contrast ratios before shipping any UI.
WCAG AA vs AAA — What's the Difference?
WCAG AA (the standard required for ADA and Section 508 compliance) requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). WCAG AAA is the enhanced level, requiring 7:1 for normal text and 4.5:1 for large text. For most websites, AA is the legal requirement — AAA is best practice for maximum accessibility.
How to Check Color Contrast for ADA Compliance
Enter your text colour and background colour hex codes in the pickers above. The tool instantly calculates the contrast ratio and shows whether it passes WCAG AA (4.5:1), WCAG AAA (7:1), and large text standards. The preview panel shows exactly how your colour pair looks in a real webpage layout — including headers, body text, buttons, and captions — so you can see the real-world result, not just a number.
Free WCAG Contrast Checker — No Signup Required
Our contrast checker is a free alternative to WebAIM's contrast checker, Coolors' contrast tool, and Stark — with added features like a live webpage preview, colourblind simulation (Protanopia, Deuteranopia, Tritanopia), a palette contrast grid for checking multiple brand colours at once, and one-click CSS variable and JSON design token export.
Check Your Entire Brand Palette at Once
The Palette Contrast Grid below the main checker lets you add all your brand colours and see every combination's contrast ratio in a single table. This is ideal for design systems and component libraries where multiple colour pairings are used across different contexts — buttons, alerts, badges, links, and backgrounds.