How the Contrast Ratio Is Calculated
WCAG defines contrast using each color's relative luminance - a measure of how bright a color appears, weighted by how the human eye perceives red, green, and blue differently.
Each channel (R, G, B) is first linearized to account for how monitors render color, then combined using the weights 0.2126 (red), 0.7152 (green), and 0.0722 (blue) - green contributes the most to perceived brightness.
WCAG AA vs AAA
| Level | Who it's for | Normal / Large text |
|---|---|---|
| AA | Standard legal & commercial baseline | 4.5:1 / 3:1 |
| AAA | Enhanced accessibility, government/health sites | 7:1 / 4.5:1 |
Common Contrast Failures
How to Fix Contrast Failures
- Darken the text or lighten the background (or both) until the ratio checker above shows a pass for your target level.
- Don't rely on color alone to convey meaning - pair colored status indicators with an icon or label too.
- Test your actual brand palette pairs, not just black-on-white - the failures usually show up in secondary/muted text and button states.
Frequently Asked Questions
Most legal accessibility requirements (like the ADA and EN 301 549) reference AA, not AAA. AAA is a stricter, optional goal.
Not directly - contrast ratio is about luminance (brightness), not hue. A color-blind-safe palette still needs adequate contrast on top of distinguishable hues.
No - 3:1 only satisfies AA for large text (18pt+/14pt bold+) and for UI component/graphical object contrast, not normal body text.