Color contrast checks

Severity: Recommended

Insufficient contrast affects users with low vision, color blindness, and everyone in bright sunlight. WCAG requires 4.5:1 for normal text.

Check automatically:

# Check for color/contrast in a11y tests
grep -riE "contrast|color.*ratio|toHaveNoViolations" --include="*.test.*" --include="*.spec.*" . 2>/dev/null | grep -v node_modules | head -10

# Look for design tokens or color system docs
find . -maxdepth 4 -type f \( -name "*colors*" -o -name "*tokens*" -o -name "*theme*" \) \( -name "*.ts" -o -name "*.js" -o -name "*.json" -o -name "*.css" \) 2>/dev/null | grep -v node_modules | head -10

# Check Lighthouse config for accessibility audits
grep -riE "accessibility|contrast" lighthouserc* .lighthouserc* 2>/dev/null

# Check for Storybook a11y addon (includes contrast)
grep -E "storybook.*a11y|addon-a11y" package.json 2>/dev/null

Ask user:

• "Are color choices validated for contrast?" (design phase, code review, automated)
• "What's the target ratio?" (4.5:1 for AA normal text, 3:1 for large text)
• "How are new colors added?" (must pass contrast check, designer approval)

Pass criteria:

• Contrast is checked somewhere in workflow (design, PR, CI)
• Color system exists with pre-validated colors
• axe-core or Lighthouse catches contrast violations in CI

Fail criteria:

• No contrast checking
• "Designer picked the colors" without validation
• Known contrast issues ignored

Cross-reference with: A11Y-002 (automated testing should catch contrast issues)

Evidence to capture:

• Contrast validation method
• Color system/tokens location
• Automated contrast testing in CI

---