WCAG Contrast Requirements
The numbers you need to know for accessible color choices.
Why Contrast Matters
Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Low vision affects millions more. Adequate contrast ensures your content is readable for everyone, not just those with perfect vision.
Beyond ethics, WCAG compliance is increasingly a legal requirement. The ADA (Americans with Disabilities Act) has been applied to websites, and failing to meet accessibility standards can result in lawsuits.
The Contrast Ratio Scale
Contrast ratio is measured on a scale from 1:1 (no contrast — same color) to 21:1 (maximum contrast — pure black on pure white).
Applies to: Normal text (under 18pt/14pt bold)
Minimum requirement for most websites
Applies to: Large text (18pt+ or 14pt+ bold), UI components
Required for buttons, icons, form inputs
Applies to: Normal text (enhanced)
Highest accessibility — recommended for long-form content
Applies to: Large text (enhanced)
Stricter large text requirement
Visual Examples
This dark gray text on white background is easy to read.
This medium gray just meets the minimum requirement.
This light gray is difficult to read for many users.
Common Pitfalls
❌ Light gray placeholder text
Placeholders often fail contrast requirements. Use darker grays or clear labels instead.
❌ Brand colors on colored backgrounds
Your brand blue might pass on white but fail on your light blue section background.
❌ Thin fonts at small sizes
Light/thin font weights reduce perceived contrast. Use 400+ weight for body text.
❌ Color-only indicators
Red for errors, green for success — always add icons or text labels too. See our color blindness guide.
How to Check Contrast
- 1
Use browser extensions
WAVE, axe DevTools, or Lighthouse can audit your entire page automatically.
- 2
Check during design
Figma plugins like Stark or A11y check contrast as you design.
- 3
Test every combination
Check text on every background it might appear on, including hover and active states.
Generate Accessible Palettes
Every palette from Aura Mixer is checked for WCAG compliance automatically.
Create Accessible Palette