“Looks fine” isn't a ratio
Timed rounds: call pass or fail on real color pairs, tap targets and alt text before the WCAG formula weighs in. The arithmetic computes the instant you commit — and it keeps score on your confidence.
Each round shows one UI specimen. Call pass or fail against WCAG before the clock runs out — the real math computes the moment you commit.
The literal contrast-ratio formula computes on screen the instant you commit your call — accessibility stops being a plugin you trust and becomes arithmetic you can catch a plugin getting borderline-wrong on.
What is a WCAG contrast ratio?
It's the ratio between the relative luminance of text and its background, on a scale from 1:1 to 21:1. WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text; AAA raises that to 7:1 and 4.5:1. It's a formula, not a judgment call.
Why can text look fine and still fail the math?
Your eyes adapt to screen brightness, hue and surrounding context, so saturated colors like orange or teal often read punchy while measuring only 2–3:1. The formula uses relative luminance alone — which is exactly why perceived and measured accessibility disagree so often.
How big does a tap target need to be?
WCAG 2.2 sets a 24×24 CSS-pixel minimum at level AA (2.5.8), and 44×44 for the enhanced AAA bar (2.5.5). Icon-only close buttons and checkboxes are the usual offenders — they look tappable on a designer's screen and miss by a few pixels.
This playable is part of the registry: its tool page
Next: see what your words cost
The Tokenizer Lab shows the tokens a model actually reads — the unit every context window and API bill is counted in.