Color Accessibility Guide: Contrast Ratios That Matter
Learn WCAG contrast ratio requirements and how to choose color combinations that make your UI accessible to everyone.
Color contrast is not just about aesthetics — it directly affects whether users can read and interact with your content. An estimated 300 million people worldwide have color vision deficiency.
WCAG Contrast Requirements
|-------|-------------|---------------------|---------------|
Calculating Contrast Ratio
function getRelativeLuminance(r, g, b) {
const [rs, gs, bs] = [r, g, b].map(c => {
c = c / 255;
return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
});
return 0.2126 rs + 0.7152 gs + 0.0722 * bs;
}
function getContrastRatio(rgb1, rgb2) {
const l1 = getRelativeLuminance(...rgb1);
const l2 = getRelativeLuminance(...rgb2);
const lighter = Math.max(l1, l2);
const darker = Math.min(l1, l2);
return (lighter + 0.05) / (darker + 0.05);
}
Common Accessibility Failures
Light Gray on White
/ FAIL: contrast ratio 2.3:1 /
.placeholder { color: #aaaaaa; background: #ffffff; }
/ PASS: contrast ratio 4.6:1 /
.placeholder { color: #767676; background: #ffffff; }
Color-Only Information
Never use color as the sole means of conveying information. Always add text labels, icons, or patterns.
Color Blindness Considerations
- Protanopia (red-blind): Avoid red-green combinations
- Deuteranopia (green-blind): Most common, affects 8% of males
- Tritanopia (blue-blind): Avoid blue-yellow combinations
Use our Color Converter tool to check contrast ratios and find accessible color alternatives.