Color contrast quiz
Color contrast practice
Swipe right if it passes WCAG, left if it fails. Or use the buttons or your arrow keys.
The rule in plain words
WCAG 1.4.3 Contrast (Minimum)
Text needs enough contrast against its background for people with low vision, aging eyes or a phone in sunlight to read it.
Normal text needs a contrast ratio of at least 4.5:1. Large text needs at least 3:1.
The ratio is never rounded. A gray that measures 4.48:1 fails, even though it looks almost identical to one that passes.
| What | Needs |
|---|---|
| Normal text | 4.5:1 |
| Large text (24px, or 18.66px bold) | 3:1 |
| Enhanced, Level AAA (normal / large) | 7:1 / 4.5:1 |
Exceptions people miss
- Disabled buttons and other inactive controls.
- Logos and brand names.
- Purely decorative text and text that is not visible to anyone.
Common mistakes
- Light gray body or helper text. #999999 on white is only 2.85:1.
- White text on bright brand colors like green, orange, pink or sky blue.
- Dark mode grays that look fine on a bright monitor but drop below 4.5:1.
- Assuming 4.48:1 rounds up to 4.5:1. It does not.
Your turn
Is your own site accessible or not?
Axeazy scans your real pages for WCAG issues like the ones in this deck and opens code fixes, not an overlay. Free scan in 60 seconds, no credit card.
Questions
Color contrast, answered
What contrast ratio does WCAG require for text?
At Level AA, normal text needs 4.5:1 and large text needs 3:1. Large means at least 24px regular or about 18.66px bold.
Does WCAG round contrast ratios?
No. A ratio of 4.49:1 fails the 4.5:1 requirement. Measure, do not eyeball.
Do logos need to meet contrast requirements?
No. Text that is part of a logo or brand name is exempt from 1.4.3.
Do disabled buttons need good contrast?
No. Inactive controls are exempt, though it still helps to explain why something is unavailable.