Overview
Contrast is the difference between text that gets read and text that gets skipped. Too little of it and your words dissolve into the background for older readers, outdoor phone users and anyone with low vision — a large share of every audience. Accessibility guidelines draw the line with numbers, and this checker computes those numbers exactly, the way the specification defines them.
You get the precise ratio to two decimals, plus four plain verdicts: AA and AAA for normal text, AA and AAA for large text. Pick colours with the visual well or type HEX codes directly, flip them with one tap, and watch a live sample of real type re-render in your pairing as you work.
How is the contrast ratio calculated?
The WCAG formula compares the relative luminance of the two colours — roughly, how bright each appears to human vision, with green weighted heaviest because eyes are most sensitive to it. Each channel goes through a gamma correction first (the step cheap calculators skip), then the ratio is (lighter + 0.05) / (darker + 0.05). The result runs from 1:1 for identical colours to 21:1 for black on white.
The thresholds are 4.5:1 for normal text at AA, 3:1 for large text at AA, and 7:1 / 4.5:1 at AAA. These are not aesthetic opinions; they map to measurable legibility for people with moderately low vision. Passing AA is the legal and practical baseline most organisations target.
Features
- True WCAG arithmetic — relative luminance per the spec, gamma correction included.
- Four clear verdicts — AA and AAA for normal and large text, each a plain PASS or FAIL.
- Two input styles — a visual colour well or typed HEX codes, kept in sync.
- One-tap swap — flip text and background; the reverse often reads better.
- Live type preview — heading, body and small print rendered in your exact colours.
- Ratio to two decimals — the precise number itself, not a vague score.
- Private by design — pure arithmetic on your machine; nothing is uploaded.
Benefits
- Know, don't guess. Eyeballing contrast is how failures ship.
- Speak the standard's language. AA/AAA verdicts map straight to requirements.
- Iterate fast. Nudge a colour and watch the ratio move live.
- Design with confidence. Ship palettes knowing the text survives them.
Who can use it
Designers finalising colour systems, developers implementing themes (dark mode especially), content teams choosing brand colours for text, and anyone auditing a site for accessibility compliance. It is equally useful before a redesign — testing proposed pairings here is cheaper than fixing them after launch — and for settling team debates with a number instead of opinions.
How to use
- Set the text colour with the well or a HEX code.
- Set the background colour the same way.
- Read the ratio and the four AA/AAA verdicts.
- Try the swap button — reversed pairings often pass more easily.
- Adjust lightness until normal text passes AA at minimum, then lock the pair in.
Frequently asked questions
What is the difference between AA and AAA?
They are two conformance levels in the WCAG guidelines. AA is the widely adopted baseline — 4.5:1 for normal text, 3:1 for large — and what most laws and policies require. AAA is stricter (7:1 and 4.5:1) and aspirational for body text; it is genuinely hard to hit across a whole design. Aim for AA everywhere as the minimum, and AAA where it matters most, like key instructions.
Why does large text get an easier threshold?
Because bigger, bolder letterforms stay legible at lower contrast — there is simply more of each stroke for the eye to work with. WCAG defines large as at least 18pt (24px) regular or 14pt bold. The checker applies the right threshold to each, so test your actual sizes rather than assuming.
My brand colours fail. Now what?
Keep the hue, change the lightness — the fix that preserves brand identity. Darken the text or lighten the background in small steps until the ratio crosses 4.5:1; the live preview shows exactly when it happens. Most brand palettes can be made compliant without abandoning the brand.
Does passing guarantee readability?
No — contrast is necessary but not sufficient. Tiny type, thin weights, text over busy images and poor line spacing can all defeat a passing ratio. Treat the checker as the gatekeeper: fail here and the text is definitely a problem; pass here and you still need sensible typography.
Is anything I test stored?
No. The checker does arithmetic in your browser and keeps no record. Test client palettes and unreleased designs freely.
Conclusion
Contrast is one of the few design qualities with a genuinely right answer, and it is a number, not an opinion. Compute it properly per the WCAG formula, demand AA as the absolute floor for normal text, and let the pass/fail verdicts — not team debates — settle every text-and-background pairing you ship.