Color Contrast Check: free accessibility game for WCAG

What is 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.

Color Contrast Check is a free accessibility game about colour contrast. Each round shows a design from a made-up app, a button, a badge, a paragraph or a heading, and asks one question: can people read this text on this colour? Tap Readable or Hard to read before the clock runs out.

Every answer shows the real contrast ratio, computed with the WCAG formula from the colours' relative luminance, and the minimum it needed: 4.5:1 for normal text, 3:1 for large text. Levels ramp from obvious pairs to close calls like 4.47:1, and from level 3 you fix designs by picking the only text colour that passes.

At a glance

Category

Skillz

Difficulty

Easy

Play time

2–4 min

Price

Free, in your browser, sign-up optional

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.

Scoring

Each right answer scores 100 points (150 in fix-it rounds) plus up to 50 for answering fast.

A wrong answer or a timeout costs one of 3 lives. Levels ramp from obvious pairs to close calls, then fix-it rounds from level 3.

What it trains

Accessibility

The WCAG AA contrast rule: 4.5:1 for normal text, 3:1 for large text.

Design judgement

Seeing that lightness, not hue, makes text readable.

Fixing designs

Picking a text colour that passes instead of just spotting the problem.

Strategy and 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.

Why play Color Contrast Check?

Low-contrast text is one of the most common accessibility problems on the web, and it hurts everyone: people with low vision, older eyes, or a phone in the sun. The WCAG contrast rule turns "is it readable?" into a number you can check. Color Contrast Check trains your eye to spot failing pairs before a tool has to tell you.

Frequently asked questions