Color Accessibility Checker
Check any two colours against WCAG AA and AAA. Live preview, plain-English verdicts, and suggested fixes when a pairing falls short.
The quick brown fox jumps over the lazy dog. This is normal body text at 16px.
Large heading text at 24px bold
Button or UI elementAdvertisement
What Is WCAG, and Why Does Contrast Matter?
What is WCAG?
WCAG stands for Web Content Accessibility Guidelines. It's the international standard for making web content usable by people with disabilities, published by the World Wide Web Consortium. The current version, WCAG 2.2, became a W3C Recommendation on 12 December 2024.
Three success criteria cover colour contrast, and they're the ones this tool checks:
1.4.3 Contrast (Minimum), Level AA. Text and images of text need a ratio of at least 4.5:1, or 3:1 if the text is large. W3C defines large as "at least 18 point or 14 point bold."
1.4.6 Contrast (Enhanced), Level AAA. The same idea with the bar raised to 7:1 for normal text and 4.5:1 for large text.
1.4.11 Non-text Contrast, Level AA. User interface components and meaningful graphics need 3:1 against adjacent colours. That covers button borders, form field outlines, focus indicators and icons that carry meaning. There is no AAA version of this criterion, so when you pick UI components above, AAA is marked as not applicable rather than failed.
Most accessibility laws point at Level AA rather than AAA. AA is the practical target for a business website. AAA is worth reaching for on body copy where you can get it cheaply, but the W3C itself notes it isn't achievable for all content.
How is the contrast ratio actually calculated?
It's not a simple difference in brightness. Each colour channel gets converted from the 0 to 255 range into a linear value, then weighted: red counts for 0.2126, green for 0.7152, and blue for 0.0722. Green dominates because human vision is most sensitive to it. That weighted sum is the relative luminance.
The ratio is then (lighter + 0.05) divided by (darker + 0.05). The 0.05 offset models ambient screen glare, which is why the scale tops out at 21:1 for pure black on pure white rather than running to infinity.
The practical consequence catches people out: yellow on white looks like a strong colour choice and scores 1.07:1, which is close to invisible. Blue on white looks softer and scores far better. Trust the number, not your eye.
How often do real sites get this wrong?
Constantly. WebAIM's 2026 Million report, which runs automated tests across the top one million home pages, found low contrast text on 83.9% of them. The average page carried 34 separate instances of it, and low contrast was the most frequently detected problem of any kind.
The wider picture from the same sample: 95.9% of home pages had detectable WCAG failures, averaging 56.1 errors each. That's up 10.1% on the 2025 analysis, which found 51 errors per page, reversing several years of gradual improvement.
The useful takeaway for a designer is that contrast failures are almost never deliberate. They creep in through grey placeholder text, light-on-bright buttons, and disabled states that nobody re-checked after a palette change.
Five Colour Combinations That Fail, and How to Fix Them
Every ratio below is calculated with the same WCAG formula this tool uses. The fix in each case keeps the hue and adjusts lightness, so your palette still looks like itself.
Notice the pattern. Four of the five failures involve a light or mid-tone colour sitting on white, and the fix is almost always to darken the colour rather than abandon it. The exception is white text on a coloured button, where you darken the button instead.
Where This Tool Stops Being Enough
Automated contrast checking works on two flat colours. It can't judge text sitting on a photograph, a gradient, or a video, because the background changes pixel by pixel. For those, either add a solid scrim behind the text or test the worst-case region by hand.
It also says nothing about the rest of accessibility. You can pass every contrast check on this page and still ship missing alt text, unlabelled form inputs, a keyboard trap in a modal, or headings that jump from H1 to H4. Contrast is one criterion out of dozens. WebAIM's guide to contrast and colour is a good next read if you want the reasoning behind the thresholds.
And don't rely on colour alone to carry meaning. A red field border says "error" to most people and nothing at all to someone with a red-green colour vision deficiency. Pair it with an icon or a text label.