WCAG Color Contrast: The Complete Accessibility Guide
Understand WCAG 2.1 color contrast requirements, how contrast ratios are calculated, AA vs AAA levels, and how to fix failing text automatically.
- 4.5:1 minimum for normal text (AA), 7:1 for AAA
- Large text (18pt+) only needs 3:1 for AA
- Never use color as the only way to convey information
- #999 on white is only 2.85:1 — a very common AA failure
What Is WCAG?
The Web Content Accessibility Guidelines (WCAG) are published by the W3C and define how to make web content accessible to people with disabilities, including those with low vision or color blindness. WCAG 2.1 is the current widely adopted version. Many countries legally require WCAG compliance.
How Contrast Ratio Is Calculated
Contrast ratio compares the relative luminance of two colors. Luminance accounts for how the human eye perceives brightness — green is weighted more than red, red more than blue.
The formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. Results range from 1:1 (identical colors) to 21:1 (black on white).
AA vs AAA Requirements
- Level AA (minimum) — 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt+ bold), 3:1 for UI components.
- Level AAA (enhanced) — 7:1 for normal text, 4.5:1 for large text.
Target AA as your baseline. AAA is aspirational but not required for all content types. Most legal requirements reference AA.
Common Failures
- Light gray on white — Very common in minimalist design. #999999 on white = only 2.85:1. Fails AA.
- Placeholder text — Often 40% opacity or light gray, well below 4.5:1.
- Two saturated colors — May feel high-contrast but fail the calculation.
- Text over gradients — Must meet contrast at every point where text appears.
Color Blindness
About 8% of men and 0.5% of women have color vision deficiency. Never use color as the only means of conveying information — always pair with text labels, icons, or patterns.
How to Fix Failing Contrast
The fastest fix is darkening text or lightening background. When brand colors can't change: add a white halo, increase font weight (larger text has lower requirements), or adjust only the local background behind the text. Run your entire color palette through a contrast checker and document approved combinations by role.
Fix failing contrast automatically
Enter text and background colors — get AA/AAA-passing alternatives instantly