WCAG Color Contrast Guide: Make Your Website Accessible

Approximately 300 million people worldwide have color vision deficiencies. Poor color contrast makes your website unusable for many users — and violates accessibility laws in many countries.

What is WCAG?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios for text to be readable by people with visual impairments.

Contrast Ratio Requirements

• WCAG AA (Normal text) — Minimum 4.5:1 ratio
• WCAG AA (Large text 18pt+) — Minimum 3:1 ratio
• WCAG AAA (Normal text) — Minimum 7:1 ratio
• WCAG AAA (Large text) — Minimum 4.5:1 ratio

How Contrast Ratio is Calculated

function getLuminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(v => {
    v /= 255;
    return v <= 0.03928 
      ? v / 12.92 
      : Math.pow((v + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
}

function getContrastRatio(color1, color2) {
  const l1 = getLuminance(...color1);
  const l2 = getLuminance(...color2);
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}

// White on #7c5cfc (CodeCanvas purple)
getContrastRatio([255, 255, 255], [124, 92, 252]);
// → 3.14:1 — Fails AA for normal text, passes for large text

Common Failures

• Light gray text on white background
• Yellow text on white background
• Light blue links on white
• Dark text on dark backgrounds

Quick Fixes

/* ❌ Bad - fails WCAG AA */
.text { color: #999; background: #fff; }  /* 2.85:1 ratio */

/* ✓ Good - passes WCAG AA */
.text { color: #767676; background: #fff; }  /* 4.54:1 ratio */

/* ✓ Better - passes WCAG AAA */
.text { color: #595959; background: #fff; }  /* 7.0:1 ratio */

Android Accessibility

// In Material Design 3, use colorScheme for accessible colors
MaterialTheme(
    colorScheme = darkColorScheme(
        primary = Color(0xFFBB86FC),        // 4.5:1+ on dark backgrounds
        onPrimary = Color(0xFF000000),
        background = Color(0xFF121212),
        onBackground = Color(0xFFE1E1E1),  // 12:1 contrast
    )
) { /* ... */ }