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.

Part of the miatz playgrounds. Explore the rest from the playground catalog.

Bookmark this page (Ctrl+D, or ⌘D on Mac) — it works offline the next time you need it.

Looks fine isn't a ratio

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.

FAQ