WCAG Contrast: The Complete Guide
Everything you need to know about color contrast for accessible web design.
What is WCAG?
WCAG (Web Content Accessibility Guidelines) are international standards for making web content accessible to people with disabilities. Color contrast is a key requirement for users with low vision or color blindness.
Contrast Ratio Explained
Contrast ratio measures the difference in luminance between two colors, expressed as X:1. The minimum is 1:1 (no contrast) and maximum is 21:1 (black on white).
WCAG Levels
| Level | Normal Text | Large Text | UI Components |
|---|---|---|---|
| AA (Minimum) | 4.5:1 | 3:1 | 3:1 |
| AAA (Enhanced) | 7:1 | 4.5:1 | — |
What Counts as Large Text?
- 18pt (24px) or larger regular weight
- 14pt (18.66px) or larger bold weight
Common Mistakes
- Light gray text on white: Often fails AA for body text
- Colored links without underlines: Hard for colorblind users
- Low contrast placeholders: Input hints should be readable
- Disabled states too faded: Users need to see what's disabled
Tips for Better Contrast
- Test your designs in grayscale
- Don't rely on color alone to convey meaning
- Use underlines for links (not just color)
- Check contrast for all interactive states
- Consider users in bright sunlight
Check Your Colors
Use our Contrast Checker to verify WCAG compliance and get automatic fix suggestions.