Color Contrast Checker
Check whether two colours have enough contrast to be readable, against the WCAG accessibility standards, with the ratio and pass/fail levels.
Readable colour, measured
Text needs enough contrast against its background to be readable, and accessibility guidelines set measurable minimums. This checks a text-and-background pair, giving the contrast ratio and whether it passes the standards, so you can build colour combinations that work for everyone rather than discovering a readability problem after launch.
How contrast is measured
Contrast is expressed as a ratio between the lightness of the two colours, running from 1:1 (identical, invisible) up to 21:1 (pure black on pure white). The higher the ratio, the easier the text is to read. The Web Content Accessibility Guidelines set thresholds that text should meet, with a lower bar for large text since it is easier to read at any contrast:
| Level | Normal text | Large text |
|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
Large text generally means around 18 point, or 14 point bold, and up. AA is the level most sites aim for and many regions require by law; AAA is a stricter target for maximum accessibility.
Why it matters, and the common failure
Low-contrast text is one of the most widespread accessibility failures — the fashionable light-grey-on-white look fails badly, excluding people with low vision and straining everyone in bright light or on a dim screen. It is also invisible to designers with good eyesight on a good monitor, which is exactly why measuring rather than eyeballing is essential. If a combination falls short, the fixes are to darken the text, lighten the background, or increase the difference in lightness between them. Checking contrast is a small step that makes a real difference to how many people can comfortably read what you publish.
Frequently asked questions
What contrast ratio do I need?
At least 4.5:1 for normal text and 3:1 for large text to meet the AA standard most sites aim for. AAA asks for 7:1 and 4.5:1.
What counts as large text?
Roughly 18 point and up, or 14 point bold and up — it can meet a lower contrast threshold because it is easier to read.
Why can't I just judge contrast by eye?
Because it is measured against how the human eye perceives lightness, and text that looks fine to someone with good eyesight on a good screen can fail for others. Measuring is reliable.
How do I fix a failing combination?
Darken the text, lighten the background, or otherwise increase the difference in lightness between the two colours until the ratio passes.
Is anything uploaded?
No. The check happens in your browser.