Overview
A beautiful colour pairing that nobody can read is a failed design. The Web Content Accessibility Guidelines draw a bright line: normal text needs a contrast ratio of at least 4.5:1 against its background, large text 3:1. This checker computes the exact ratio with the official formula and gives you a plain pass or fail — no squinting, no guessing, no “looks fine to me.”
Beside the numbers sits a live preview rendering real paragraphs in your colours, because ratios are abstract and reading is not. Drag either colour and watch both the number and the actual text respond. What passes on paper but strains in the preview is still worth fixing.
What is a contrast ratio?
Contrast ratio measures how distinguishable two colours are, on a scale from 1:1 (identical) to 21:1 (black on white). The WCAG formula does not compare the colours naively: it first converts each to relative luminance — a measure of perceived brightness that weights green heavily and blue lightly, mirroring human vision — then divides the lighter by the darker with a small offset.
The thresholds (4.5:1 for body text) were calibrated against real readers, including people with moderately low vision and colour blindness. They are not aesthetic opinions; they are the line at which text stays readable for roughly everyone, on decent screens, in decent light.
Features
- Exact contrast ratio computed with the official WCAG relative-luminance formula.
- AA and AAA verdicts for normal and large text, shown as clear pass or fail.
- Live text preview — real paragraphs rendered in your colours as you adjust them.
- Colour pickers plus HEX input, kept in sync so you can work either way.
- One-click swap to test the reverse pairing instantly.
- Perceptually honest — the formula weights green most, matching human vision.
- Fully local — the arithmetic runs on your device; nothing is uploaded.
Benefits
- Design with confidence. Know a combination passes before it ships.
- Catch problems early. Checking takes seconds; fixing after launch takes weeks.
- Real preview, not numbers alone. See actual text in your colours as you adjust.
- Private testing. Client palettes never leave your browser.
Who can use it
Web designers and developers checking designs before they ship, product teams running accessibility audits, content editors choosing colours for headings and buttons, marketers making sure campaigns are readable, and students learning what WCAG actually requires. Anyone responsible for text other people must read should keep this checker one tab away.
How to use
- Set the text colour with the picker or by typing a HEX code.
- Set the background colour the same way.
- Read the exact ratio and the AA/AAA pass-fail verdicts.
- Check the live preview to see real text in your pairing.
- Adjust either colour until the verdicts pass — small shifts often do it.
Frequently asked questions
What is the difference between AA and AAA?
AA is the standard most organisations target: 4.5:1 for normal text, 3:1 for large text (roughly 18pt+ or 14pt bold). AAA is stricter — 7:1 for normal text, 4.5:1 for large — and is the goal for body copy where feasible. Logos and purely decorative text are exempt from both, though readable is still better.
Why is 4.5:1 the magic number?
Because vision varies enormously: ageing eyes, colour blindness, bright sunlight on a phone, cheap monitors. A combination that looks crisp to a designer in a dark office can be invisible to someone else. The 4.5:1 line is calibrated so text remains readable for people with moderately low vision.
What counts as “large text”?
Large text gets the easier 3:1 threshold because thicker strokes stay legible at lower contrast. The usual definition: at least 18pt (24px), or 14pt (about 18.66px) bold. The checker applies the right threshold once you tell it which size you are testing — or just aim for 4.5:1 everywhere and stop thinking about it.
My brand colours fail — what now?
Darken the text or lighten the background until the ratio crosses the line — the live preview shows the effect instantly. Resist the urge to just bold it: weight helps a little, but luminance distance is what the formula measures. Small shifts often suffice; going from #777 to #595959 on white crosses 4.5:1.
How is this different from other checkers?
The math is identical everywhere, since every serious checker implements the same WCAG formula. What differs is workflow: this one keeps your colours private, updates live as you drag, and pairs the number with a real text preview instead of a bare ratio.
Is anything I test uploaded?
No. The calculation is pure arithmetic on numbers you type; nothing is uploaded, stored or associated with you. Test client palettes freely.
Conclusion
Contrast is the cheapest accessibility win on the web: one ratio, checked in seconds, standing between your text and a chunk of your audience. Run every pairing through the checker before it ships — your readers' eyes will notice, even if they never know why.