Level: 1/4
Lives: 3 lives left
Score: 0000
Best: --

Color Contrast Check

Text on colour: readable or not? Judge 16 designs by the real accessibility rule before your users squint. 3 lives.

Color Contrast Check

Buttons, badges, paragraphs and headings in made-up apps: is the text readable on its colour? The game computes every contrast ratio with the real WCAG formula and grades it at level AA: 4.5:1 for normal text, 3:1 for large text. Four levels of 4 designs ramp from obvious to close calls, then fix-it rounds where you pick the only text colour that passes.

16 designs
WCAG

How to play

Judge the design. Tap ✓ Readable or ✗ Hard to read, or press → or ←. The clock runs on every design.
Know the rule. Normal text needs a contrast ratio of 4.5:1. Large text (24px, or about 19px bold) needs 3:1. No rounding: 4.49 fails.
Fix it. From level 3, pick the only text colour that passes on the background (or press 1 to 3).
Score. 100 per right answer (150 for a fix) plus up to 50 for speed. A miss or the clock costs one of 3 lives.

Quick tips

Squint at it. Lightness matters, not hue. Two shades of the same colour, like pink on pale pink, rarely contrast enough.
Check the text size. Large text (24px, or about 19px bold) only needs 3:1, so a bright red heading can pass where a small red button fails.
Don't round up. 4.49:1 fails. #767676 is the lightest grey that passes on white; #777777 misses by a hair.
Try dark text on bright colours. On orange, yellow or a bright green, black text often beats white by a wide margin.
Mind off-white backgrounds. Grey text that passes on white can fail on a light grey card.