WCAG Contrast Requirements
Make your colors accessible to everyone
What is Contrast Ratio?
Contrast ratio measures the brightness difference between two colors on a scale of 1:1 to 21:1. Higher ratios = easier to read for people with vision impairments.
WCAG Levels
| Level | Normal Text | Large Text |
|---|---|---|
| AA (Minimum) | 4.5:1 | 3:1 |
| AAA (Enhanced) | 7:1 | 4.5:1 |
Best Practices
- Always test text on background combinations
- Aim for AAA where possible (7:1 ratio)
- Use Tonal Field's built-in contrast checker
- Test with real users when possible
- Don't rely on color alone for meaning
Test and fix contrast in Tonal Field with automatic AA/AAA adjustments.