Looks fine isn't a ratio
You're shown a colour pair — text on a background — and you call pass or fail against WCAG AA before any tool weighs in. The instant you commit, the real contrast-ratio formula computes on screen and tells you whether your eye matched the math. Accessibility stops being a plugin you trust and becomes arithmetic you can catch a plugin getting borderline-wrong on. Runs entirely in your browser (0 uploads, works offline).
How to use it
- Look at the swatch and guess: does this text pass WCAG AA?
- Commit — the exact contrast ratio computes live and scores your call.
- Read the X-ray — the ratio, the threshold it needed, and the formula behind it.
What this clears up (the fundamentals)
- Contrast ratio is math, not taste — it's
(L_lighter + 0.05) / (L_darker + 0.05), where L is relative luminance. "Looks fine" has no place in it. - The AA thresholds — normal text needs 4.5:1, large text (≥18pt, or ≥14pt bold) needs 3:1. AAA is stricter (7:1 / 4.5:1).
- Your eye is unreliable here — mid-greys, brand colours on white, and light-on-light pairs fool everyone. The formula doesn't get fooled.
- Why size changes the bar — larger text is easier to read at lower contrast, so WCAG relaxes the requirement. Knowing which bar applies is half the battle.
Where it's used
A Design and front-end accessibility drill — a fast way to calibrate your eye and to sanity-check what a contrast plugin reports. It's a miatz build-lab concept playable; learn to build it yourself.
FAQ
What is a WCAG contrast ratio?
It's a number from 1:1 (identical colours) to 21:1 (black on white) that measures how distinguishable text is from its background. WCAG AA requires 4.5:1 for normal text and 3:1 for large text. This page computes it exactly from the two hex colours.
How is the ratio calculated?
Convert each colour to relative luminance (a weighted, gamma-corrected sum of its R/G/B channels), then take (L_lighter + 0.05) / (L_darker + 0.05). The +0.05 accounts for ambient screen glare.
Is anything uploaded?
No. The luminance and ratio math runs entirely in your browser and nothing is transmitted or stored — turn off your Wi-Fi and it still works.
Why did my eye get it wrong?
Because perceived contrast depends on hue, surrounding colours, and screen brightness — all things the eye weighs but the formula ignores. That gap is exactly why the math exists.
Limits
Uses the WCAG 2.1 relative-luminance formula for text contrast; it doesn't cover non-text UI (3:1 for controls) or the newer APCA model, but the AA text thresholds it checks are the ones most audits fail.
Related
Part of the Demystify Playgrounds. Explore the rest from the Playgrounds home.
Bookmark this page (Ctrl+D, or ⌘D on Mac) — it works offline the next time you need it.