WCAG Contrast Requirements Explained
The Web Content Accessibility Guidelines (WCAG) define contrast requirements to ensure content is perceivable by all users, including those with low vision. This guide breaks down the specific requirements and how to meet them.
Success Criterion 1.4.3 (AA)
Normal text requires a contrast ratio of at least 4.5:1. Large text (18pt regular or 14pt bold) requires at least 3:1. This applies to all text content including placeholder text and form labels.
Success Criterion 1.4.6 (AAA)
Enhanced contrast: 7:1 for normal text and 4.5:1 for large text. AAA is recommended for long-form reading and critical information but is not always achievable with branded color palettes.
Non-Text Contrast (1.4.11)
User interface components and graphical objects that convey information need at least 3:1 contrast against adjacent colors. This includes form inputs, buttons, icons, and chart elements.
How Contrast Is Calculated
Contrast ratio uses relative luminance: (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color. Relative luminance weighs green more heavily than red and red more than blue, matching human vision sensitivity.
Use These Tools
Frequently Asked Questions
- Do decorative elements need contrast?
- No. WCAG exempts purely decorative elements, logos, and inactive UI components from contrast requirements.
- Does dark mode need separate contrast testing?
- Yes. Each color mode must independently meet contrast requirements.