The 3 RGAA color criteria
RGAA Theme 3 has 3 fundamental criteria related to colors and contrast.
Criterion 3.1 — Information by color
Information must never be conveyed by color alone. Another visual cue must be present (text, icon, pattern, border...).
Criterion 3.2 — Text contrast
| Text type | Minimum ratio |
|---|---|
| Normal text (< 24px) | 4.5:1 |
| Large text (≥ 24px or ≥ 18.5px bold) | 3:1 |
| Incidental/decorative text | None |
Criterion 3.3 — UI component contrast
Graphical elements and UI components must have a minimum 3:1 contrast ratio.
Design best practices
- Test your mockups before development
- Use CSS variables for an accessible palette
- Don't rely on aesthetics alone: light gray may be illegible
- Test with Chrome DevTools color blindness simulator