Why Color Contrast Is a Legal and Moral Requirement
Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Add low-vision users, people reading on bright screens outdoors, and aging users, and you're looking at a significant portion of your audience who will struggle with low-contrast text. WCAG (Web Content Accessibility Guidelines) defines measurable contrast ratios so designers and developers have objective targets to hit.
What You'll Learn
- ✓ How contrast ratios are calculated (the math)
- ✓ WCAG 2.2 AA vs AAA requirements
- ✓ Common contrast failures and how to fix them
- ✓ Color blindness types and how they affect palette choices
- ✓ Tools to test your designs for accessibility
How Contrast Ratios Are Calculated
The WCAG contrast ratio formula compares the relative luminance of two colors. Luminance is a measure of perceived brightness, calculated by converting sRGB values through a gamma correction formula. The ratio is expressed as X:1, where 1:1 is no contrast (same color) and 21:1 is maximum contrast (black on white).
The Formula
// 1. Convert each 8-bit channel to linear light
function toLinear(c: number) {
const s = c / 255;
return s <= 0.04045 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
}
// 2. Calculate relative luminance
function luminance(r: number, g: number, b: number) {
return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
}
// 3. Compute contrast ratio
function contrastRatio(L1: number, L2: number) {
const lighter = Math.max(L1, L2);
const darker = Math.min(L1, L2);
return (lighter + 0.05) / (darker + 0.05);
}WCAG 2.2 Standards at a Glance
| Criterion | Min. Ratio | Applies To |
|---|---|---|
| AA - Normal text | 4.5:1 | Body copy, labels, inputs |
| AA - Large text (18px+) | 3:1 | Headings, hero text |
| AA - UI components | 3:1 | Borders, icons, focus rings |
| AAA - Normal text | 7:1 | Critical body copy |
| AAA - Large text | 4.5:1 | Enhanced headings |
Failing vs Passing Pairs
Common Failures
Passing Pairs
Color Blindness & Palette Design
Contrast ratio alone doesn't cover color blindness. Deuteranopia (red-green) affects 6% of men - if you rely on red vs green to convey status (error vs success), color-blind users won't see the difference. Always pair color with another visual cue: an icon, a label, or a pattern.
The 4 most common types:
Reduced sensitivity to green. Red and green look similar.
Reduced sensitivity to red. Reds appear dark/brownish.
Rare. Blue and yellow are confused.
Complete color blindness - sees only grayscale.
Practical Checklist
Before you ship, verify:
- • All body text meets 4.5:1 (AA) - aim for 7:1 (AAA) where possible
- • Large text (18px+) meets 3:1 minimum
- • Interactive element borders/focus rings meet 3:1 against their background
- • Never convey information with color alone - add icons or labels
- • Test your UI through deuteranopia and protanopia simulations
- • Check contrast in both light and dark mode
- • Placeholder text must also meet contrast requirements
Share this article
Test your palette for accessibility
Simulate 7 types of color blindness and check contrast ratios with these free ColorPeek tools.