Color Accessibility

Table of Contents

• Overview
• When to Use
• Quick Start
• Reference Guides
• Best Practices

Overview

Accessible color design ensures all users, including those with color vision deficiency, can access and understand information.

When to Use

• Creating color palettes
• Designing data visualizations
• Testing interface designs
• Status indicators and alerts
• Form validation states
• Charts and graphs

Quick Start

Minimal working example:

WCAG Contrast Ratios:

WCAG AA (Minimum):
  - Normal text: 4.5:1
  - Large text (18pt+): 3:1
  - UI components & graphical elements: 3:1
  - Focus indicators: 3:1

WCAG AAA (Enhanced):
  - Normal text: 7:1
  - Large text: 4.5:1
  - Better for accessibility

---
Testing Contrast:

Tools:
  - WebAIM Contrast Checker
  - Color Contrast Analyzer
  - Figma plugins
  - Browser DevTools

Formula (WCAG): Contrast = (L1 + 0.05) / (L2 + 0.05)
  Where L = relative luminance

// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

Best Practices

✅ DO

• Ensure 4.5:1 contrast minimum (WCAG AA)
• Test with color blindness simulator
• Use patterns or icons with color
• Label states with text, not color alone
• Test with real users with color blindness
• Document color usage in design system
• Choose accessible color palettes
• Use sequential colors for ordered data
• Validate all color combinations
• Include focus indicators

❌ DON'T

• Use color alone to convey information
• Create low-contrast text
• Assume users see colors correctly
• Use red-green combinations
• Forget about focus states
• Mix too many colors (>5-8)
• Use pure red and pure green together
• Skip contrast testing
• Assume AA is sufficient (AAA better)
• Ignore color blindness in testing