Colour Contrast Checker
Free tool · by Daniel HaketMake sure your text is actually readable. Pick a text and background colour and this shows the contrast ratio and whether it passes WCAG AA and AAA — the accessibility standards that also keep your design legible.
What this free tool is great for: a quick, one-off job with no signup — it runs entirely in your browser, so nothing leaves your device and there's nothing to manage.
Its honest limit: it checks or generates one thing in your browser — it won't track rankings over time, monitor changes across many pages, or optimise at scale.
Contrast is where readability and accessibility meet
Text is only useful if people can read it, and whether they can comes down largely to contrast — how sharply the text stands out from its background. Pale grey on white or mid-blue on black might look elegant in a design mockup, but for a real reader on a phone in bright sunlight, or someone with reduced vision, low-contrast text is simply hard work, and hard work is what makes people leave. This tool takes any text and background colour, calculates the exact contrast ratio between them, and tells you whether it clears the recognised accessibility thresholds — turning a subjective "does that look readable?" into an objective yes or no.
What the WCAG ratios actually require
The standards come from the Web Content Accessibility Guidelines, which express contrast as a ratio from 1-to-1 (no contrast) up to 21-to-1 (pure black on pure white). The key AA thresholds are 4.5-to-1 for normal body text and 3-to-1 for large text — roughly 18pt, or 14pt bold and above — since bigger text stays legible at lower contrast. The stricter AAA level asks for 7-to-1 on normal text. These aren't arbitrary: they're calibrated to the range of human vision, including people whose sight is reduced but uncorrected. Meeting 4.5-to-1 for your body text is the single most important contrast decision you'll make on any page.
Who low contrast actually excludes
It's tempting to think contrast only matters for a small group, but the affected audience is huge and includes people who'd never call themselves disabled. Millions have some degree of colour-vision deficiency. Far more have the ordinary, age-related decline in contrast sensitivity that comes for almost everyone eventually. And then there's everyone in a difficult viewing situation: glare on a screen outdoors, a cheap or dimmed display, a low-brightness battery-saving mode, tired eyes at the end of a long day. Designing for good contrast doesn't just serve people with permanent impairments — it serves your entire audience in the ordinary, imperfect conditions they actually browse in.
AA versus AAA — how far to go
The guidelines offer two bars, and it's worth knowing which to aim for. AA is the widely-accepted baseline — the level most accessibility policies, and most of the law that references them, expect you to meet. AAA is stricter and, for contrast, genuinely hard to hit with anything but very dark text on very light backgrounds, which can constrain brand design. The pragmatic stance most teams take is: treat AA as a firm minimum you never drop below for real content, and reach for AAA on the most important reading text where the design allows. Falling below AA, by contrast, should be treated as a bug, not a style choice.
It's not only about body text
Newer versions of the guidelines extend contrast requirements beyond paragraphs. Interactive and informational non-text elements — button outlines, form-field borders, icons that convey meaning, the essential parts of a chart — need a contrast ratio of at least 3-to-1 against what's next to them, so users can actually perceive them. A button whose border barely differs from the page, or a form field with no visible edge, fails people just as a faint paragraph does. So when you check contrast, don't stop at the text: the controls people are meant to click and the elements they're meant to understand need to be perceivable too.
Never rely on colour alone
A close cousin of the contrast rule is this: never use colour as the only way to convey information. If a form marks errors purely by turning fields red, someone who can't distinguish red from green has no idea which fields are wrong. If a chart's lines are told apart only by hue, the same reader is lost. The fix is to pair colour with a second cue — an icon, a label, a pattern, a text message. Colour can reinforce meaning, but it should never be the sole carrier of it. Good contrast makes text readable; this principle makes meaning reachable regardless of how someone perceives colour.
The stakes are practical, not just ethical
Beyond doing right by your users, there are hard reasons contrast matters. Web accessibility is increasingly a legal expectation, and inaccessible sites have drawn a steady stream of complaints and lawsuits in various jurisdictions, with contrast failures among the most common and easily-proven issues cited. On top of that, readable text simply converts better — more people finish reading, understand the offer, and act on it. Accessibility and effectiveness point the same direction here: the page that's easiest for the widest range of people to read is also the page that performs best. Poor contrast fails users, invites legal risk, and costs you conversions all at once.
Dark mode doubles the work
If your site or product offers a dark theme — and more do every year — remember that contrast has to pass in both directions. A text-and-background pair that clears the threshold in light mode can fail entirely once the colours invert, and vice versa. Pure white text on a pure black background is often uncomfortably harsh, which is why well-designed dark themes use off-white text on a dark grey rather than maximum contrast. The practical rule is to check every important colour pairing in each theme you ship, not just the default one. A page is only accessible if it's accessible in the mode the reader actually chose.
Readable colour is one piece of good creative — where AdCreative.ai does more
Getting a text-and-background pairing to pass is exactly what this checker is for, and it removes the guesswork from a decision that's easy to get wrong by eye. Readable colour, though, is just one ingredient of creative that actually works — layout, hierarchy, imagery, copy and on-brand consistency all have to come together, especially for ads where you're producing many variations fast. That's where a tool like AdCreative.ai does more: it generates on-brand, conversion-focused ad and design variations at speed, so you're not hand-building each one. Use this checker to make sure your colours are readable and compliant; use a creative tool to turn readable colour into a full set of designs that perform.
Frequently asked questions
What is a good contrast ratio?
At least 4.5:1 for normal text (WCAG AA), or 3:1 for large text. 7:1 meets the stricter AAA level. Higher is more readable for everyone.
Why does contrast matter beyond accessibility?
Low-contrast text is hard to read on phones, in bright light, or for anyone with less-than-perfect vision — so you lose real readers, not just audit points.
How do I fix failing contrast?
Darken the text or lighten the background until the ratio passes. Keep your brand colour for accents, not body text, where contrast matters most.
More free content & seo
Embed this tool on your site
Blogger, teacher or toolmaker? Put this calculator on your own page — free forever, no strings. Copy the snippet below (the credit link is appreciated and keeps the tool free):
This tool is free and runs entirely in your browser. The link above is an affiliate link: we may earn a commission if you sign up, at no extra cost to you, and it never changes our honest take.