Color Accessibility: WCAG Contrast Guidelines

Color Accessibility

Good color choices ensure everyone can use your interface.

WCAG Contrast Requirements

Large text = 18pt+ or 14pt+ bold

Calculating Contrast

// Relative luminance
function luminance(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;
}
// Contrast ratio
function contrast(rgb1, rgb2) {
  const l1 = luminance(...rgb1);
  const l2 = luminance(...rgb2);
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}
contrast([0, 0, 0], [255, 255, 255]); // 21:1 (max)
contrast([255, 255, 255], [119, 119, 119]); // 4.5:1 (AA pass)

Color Blindness

~8% of men and ~0.5% of women have some form of color blindness.

Best Practices

• Don't rely on color alone

<!-- Bad: Only color indicates error -->
<input style="border-color: red">
<!-- Good: Icon + color + text -->
<input style="border-color: red">
<span class="error-icon">⚠</span>
<span>This field is required</span>

• Use sufficient contrast

• Test with simulators
• Chrome DevTools → Rendering → Emulate vision deficiencies

• Use patterns with colors in charts