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.
UNDERSTANDING WCAG
What Is WCAG Color Contrast 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 simply viewing your site in bright sunlight.
Roughly 1 in 12 people have some form of colour vision deficiency, and millions more experience age-related vision decline. Poor contrast doesn't just hurt accessibility scores — it directly reduces how many of your visitors can actually read your content.
| Standard | Normal Text | Large Text |
|---|---|---|
| WCAG AA | 4.5:1 minimum | 3:1 minimum |
| WCAG AAA | 7:1 minimum | 4.5:1 minimum |
| ADA Compliance | Requires WCAG 2.1 AA | |
AA VS AAA
WCAG AA vs AAA — What's the Difference?
WCAG AA is the standard required for ADA and Section 508 compliance, requiring 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, particularly for healthcare, government, and financial services sites.
ADA COMPLIANCE
How to Make Your Website ADA Compliant for Colour
The Americans with Disabilities Act (ADA) doesn't specify exact technical standards, but courts and the Department of Justice consistently reference WCAG 2.1 Level AA as the benchmark for digital accessibility compliance. This means every piece of text on your website — body copy, buttons, links, form labels, navigation — needs to meet at least a 4.5:1 contrast ratio (or 3:1 for large text).
Common ADA contrast failures include light grey text on white backgrounds, low-contrast placeholder text in form fields, and pastel-coloured buttons with white text.
FREE ALTERNATIVE
Free Alternative to WebAIM & Coolors Contrast Checker
Our contrast checker matches WebAIM's accuracy with added features: a live webpage preview showing exactly how your colours look in a real layout, colourblind simulation for Protanopia, Deuteranopia, and Tritanopia, a palette contrast grid for checking multiple brand colours at once, and one-click CSS variable and JSON design token export.
FREQUENTLY ASKED QUESTIONS
Color Contrast Checker FAQ
More Free Accessibility & Design Tools
Pair your colour palette with the right fonts and assets — all free, no signup.