Accessibility · WCAG contrast
Contrast Duel
Contrast Duel is a free browser game that trains designers to judge colour contrast by eye. Each round shows two text-and-background pairs; you pick the more readable one and see the real WCAG contrast ratio, so you learn what 4.5:1 actually looks like.
+30 XP · about 3 min · Not played yet
Ready? 3 minutes. No sign-up.
- Look at the two colour pairs.
- Tap the one you think has the higher contrast ratio.
- See the real WCAG ratio after every pick. Finish 10 rounds for your score.
What you'll learn
WCAG AA needs 4.5:1 for body text
Normal text must reach a contrast ratio of at least 4.5:1 against its background. Large text (about 24px, or 19px bold) needs 3:1.
Lightness matters more than hue
Two colours can look very different and still fail. Contrast is driven by relative luminance, not by how colourful a pair appears.
Check it in your design tool
Use the free UX Mate Accessibility Checker plugin to audit contrast ratios directly inside Figma.
Contrast Duel FAQ
What is a good colour contrast ratio?
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text and UI components. AAA raises normal text to 7:1.
How is contrast ratio calculated?
It compares the relative luminance of the two colours: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour. The result ranges from 1:1 to 21:1.