Understanding WCAG accessibility ratios
Web Content Accessibility Guidelines (WCAG) define how contrasting text must be compared to its background to ensure people with visual impairments or color blindness can read it comfortably:
| Target Level | Required Ratio | Where it applies |
|---|---|---|
| WCAG AA (Normal) | 4.5 : 1 | Body paragraphs, captions, input field text, subheadings under 18pt. |
| WCAG AA (Large) | 3.0 : 1 | Headings 18pt+ (24px) or bold text 14pt+ (18.66px). |
| WCAG AAA (Enhanced) | 7.0 : 1 | Highest tier of accessibility for maximum legibility. |
| UI Components | 3.0 : 1 | Input borders, active button outlines, and graphical icons. |
How contrast ratio is calculated
Luminance (L) = 0.2126 × R + 0.7152 × G + 0.0722 × B (sRGB adjusted)
Contrast Ratio = (L1 + 0.05) ÷ (L2 + 0.05)
Where L1 is the relative luminance of the lighter color, and L2 is the darker color.
Frequently asked questions
Why is color contrast legally important?
In the United States (ADA Title III), United Kingdom (Equality Act 2010), and European Union (European Accessibility Act), public-facing websites can face lawsuits if people with disabilities cannot read their content.
Does pure black on pure white cause eye strain?
While #000000 on #ffffff provides the maximum possible ratio (21:1), many modern designers use a very dark slate (such as #0f172a or #1e293b) to provide high contrast (> 12:1) while softening contrast fatigue on OLED screens.