Back to Games

Color Contrast Speedrun

Train your eye for WCAG accessibility

0 pts
Question 1 / 15
Normal Vision

How to Play

Judge whether text-background color combinations meet WCAG standards. You'll need to determine if they pass AA (4.5:1) or AAA (7:1) contrast ratios.

✗ Fail

Below 4.5:1 ratio

✓ AA Pass

4.5:1 to 7:1 ratio

✓✓ AAA Pass

7:1+ ratio

About Color Contrast Speedrun

Web Content Accessibility Guidelines (WCAG)

Sufficient color contrast between text and its background is what makes content readable, especially for users with low vision or color blindness, and for anyone using a screen in bright sunlight.

The Web Content Accessibility Guidelines (WCAG) codify this into measurable ratios: at least 4.5:1 for normal text to meet level AA, and 7:1 to meet the stricter level AAA.

In practice, this is why light gray text on a white background fails accessibility audits even though it looks 'clean,' and why most design systems define a small, tested palette of text and background color pairs instead of leaving contrast to chance.

Try Another Game