0
Accessibility · Advanced Accessibility
New technique
Contrast ratios
Grey runes on grey stone look elegant, and nobody can read them. Measure, don't guess.
Contrast is the difference in lightness between text and its background, written as a ratio from 1:1 (none) to 21:1 (black on white). Low contrast hurts people with low vision, older eyes, and anyone reading a phone in the sun.
Large text is easier to read, so it gets a lower bar. “Large” means 24px regular, or about 18.7px (14pt) bold. WCAG AA asks for:
- 4.5:1 for normal text (1.4.3 Contrast (Minimum)). Placeholder text is still text, so it counts too.
- 3:1 for large text.
- 3:1 for UI parts and meaningful graphics: input borders, icons, focus rings (1.4.11 Non-text Contrast). If the border is the only thing that shows where a field is, it needs 3:1.
- AAA raises normal text to 7:1.
- Exempt: logos, and controls that are disabled.
- Check with a contrast checker (like WebAIM's) or your browser's devtools.