Color Accessibility

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

Accessible Color Usage

Accessible Color Usage

Color Usage Guidelines:

Status Indicators:

Error:
  Color: #D32F2F (red)
  Contrast: 4.5:1 minimum
  Additional: Error icon, text "Error"
  Don't: Use ONLY red, no other indication

Success:
  Color: #388E3C (green)
  Contrast: 4.5:1 minimum
  Additional: Checkmark icon, text "Success"
  Don't: Use ONLY green

Warning:
  Color: #F57C00 (orange)
  Contrast: 4.5:1 minimum
  Additional: Warning icon, text "Warning"
  Don't: Use ONLY orange

Info:
  Color: #1976D2 (blue)
  Contrast: 4.5:1 minimum
  Additional: Info icon, text "Info"
  Don't: Use ONLY blue

---
Data Visualization:

Charts & Graphs:
  - Use 8+ color combinations for color blindness
  - Include patterns or textures
  - Label elements directly (not legend only)
  - Use colorblind-friendly palettes

Recommended Palettes:
  - ColorBrewer (designed for accessibility)
  - Okabe-Ito palette
  - Paul Tol colors

Heat Maps:
  - Sequential palettes only
  - Avoid red-green combinations
  - Test with simulator

---
UI Component States:

Button States:
  - Default: Primary color
  - Hover: Slightly darker
  - Disabled: Gray with reduced contrast
  - Focus: Outline indicator (not color alone)
  - Active: Darker shade

Form Validation:
  - Invalid: Red + error icon + message
  - Valid: Green + checkmark icon (optional)
  - Required: No special color, use text label

Interactive Elements:
  - Focus: Visible outline or ring
  - Selected: Checkmark or checkmark icon + color
  - Hover: Underline + color change
  - Don't: Use color alone to indicate state

Color Contrast Standards

Color Contrast Standards

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

Example Pairs:

Good (Pass AA):
  - Black (#000000) on White (#FFFFFF) = 21:1 ✓
  - White on Dark Blue (#003366) = 12.6:1 ✓
  - Dark Gray (#333333) on Light Gray (#EEEEEE) = 10:1 ✓

Poor (Fail):
  - Light Gray (#CCCCCC) on White (#FFFFFF) = 1.3:1 ✗
  - Yellow (#FFFF00) on White (#FFFFFF) = 1.07:1 ✗

Color Vision Deficiency Simulation

Color Vision Deficiency Simulation

# Design for color vision deficiency

class ColorAccessibility:
    COLOR_DEFICIENCY_TYPES = {
        'Protanopia': 'Red-blind (1% male)',
        'Deuteranopia': 'Green-blind (1% male)',
        'Tritanopia': 'Blue-yellow blind (very rare)',
        'Monochromacy': 'Complete color blindness (very rare)'
    }

    def simulate_vision_deficiency(self, color, deficiency_type):
        """Simulate how color appears to different eyes"""
        # Color blind simulation
        simulated_colors = {
            'normal': color,
            'protanopia': self.apply_protanopia_filter(color),
            'deuteranopia': self.apply_deuteranopia_filter(color),
            'tritanopia': self.apply_tritanopia_filter(color)
        }
        return simulated_colors

    def check_palette_accessibility(self, color_palette):
        """Validate entire palette for accessibility"""
        issues = []

        # Check contrast ratios
        for color_pair in self.generate_pairs(color_palette):
            contrast = self.calculate_contrast(color_pair[0], color_pair[1])
            if contrast < 4.5:
                issues.append({
                    'type': 'Low contrast',
                    'colors': color_pair,
                    'ratio': contrast,
                    'severity': 'Critical'
                })

        # Check color blind differentiation
        for deficiency in self.COLOR_DEFICIENCY_TYPES:
            simulated = self.simulate_for_deficiency(color_palette, deficiency)
            if not self.are_colors_distinguishable(simulated):
                issues.append({
                    'type': 'Color blindness',
                    'deficiency': deficiency,
                    'severity': 'High'
                })

        return {
            'palette': color_palette,
            'issues': issues,
            'is_accessible': len(issues) == 0,
            'recommendations': self.generate_recommendations(issues)
        }

    def generate_recommendations(self, issues):
        """Suggest palette improvements"""
        return [
            'Use patterns or icons to differentiate (not just color)',
            'Increase contrast ratios',
            'Use tested accessible color combinations',
            'Test with color blindness simulator before launch'
        ]

Testing & Validation

Testing & Validation

// Test color accessibility

class ColorAccessibilityTesting {
  testColorPalette(palette) {
    return {
      contrast_test: this.validateContrast(palette),
      colorblind_test: this.simulateColorBlindness(palette),
      usage_test: this.testColorUsage(palette),
      tools_used: [
        "WebAIM Contrast Checker",
        "Color Oracle simulator",
        "WAVE accessibility checker",
      ],
    };
  }

  validateContrast(palette) {
    const results = [];

    for (let color of palette) {
      const contrast = this.calculateLuminance(color);
      results.push({
        color: color,
        luminance: contrast,
        passes_aa: contrast >= 4.5,
        passes_aaa: contrast >= 7.0,
      });
    }

    return results;
  }

  simulateColorBlindness(palette) {
    return {
      protanopia: this.convertToProtanopia(palette),
      deuteranopia: this.convertToDeuteranopia(palette),
      tritanopia: this.convertToTritanopia(palette),
      all_distinguishable: this.checkDistinguishability(palette),
    };
  }
}