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 ✗

undefined

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'
    ]

undefined

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

// 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)
    };
  }
}