What is WCAG contrast ratio?
- WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios to ensure text is readable by people with visual impairments.
- AA is the standard legal requirement in most countries. AAA is the enhanced level.
- Poor contrast is one of the most common accessibility failures on the web.
WCAG contrast requirements explained
For normal text (under 18pt): AA requires 4.5:1, AAA requires 7:1.
For large text (18pt+ or 14pt+ bold): AA requires 3:1, AAA requires 4.5:1.
For UI components (buttons, inputs, icons): AA requires 3:1.
Frequently asked questions
What contrast ratio do I need for my website?
WCAG AA (4.5:1 for normal text) is the standard requirement and is legally mandated in many jurisdictions. Aim for AAA (7:1) for the best accessibility.
Does contrast affect SEO?
Not directly, but poor contrast hurts user experience. High bounce rates from inaccessible content can indirectly affect rankings.
What is the contrast ratio formula?
(Lighter relative luminance + 0.05) ÷ (Darker relative luminance + 0.05). Maximum is 21:1 (black on white). Minimum meaningful contrast starts around 3:1.