Accessible Color System with Universal Contrast Compliance

Redesign the color system for [PRODUCT NAME] to ensure WCAG AA compliance while maintaining brand visual identity with primary color [PRIMARY COLOR] and secondary color [SECONDARY COLOR].

Current state: [NUMBER] contrast violations identified. Current colors: [LIST OF HEX COLORS].

**1) Current Contrast Audit:**
For each color pair used in the product:
- Text on background: current ratio vs. required (4.5:1 normal, 3:1 large)
- UI components on background: current ratio vs. required (3:1)
- Status: PASS/FAIL for AA and AAA
- Tools: Color Contrast Analyzer, Stark (Figma plugin)

**2) Redesigned Palette:**
For each brand color:
- Original value -> adjusted value (minimum change possible)
- Delta E (perceptual difference) between original and adjusted
- Approval: acceptable adjustment for brand team?
- Light/dark variations that maintain contrast

For semantic colors (success, error, warning, info):
- Values that pass contrast on white AND on dark
- Alternative that doesn't rely on color alone (icon, text, pattern)

**3) Color Blindness Simulation:**
Test each critical combination in:
- Protanopia (no red perception)
- Deuteranopia (no green perception)
- Tritanopia (no blue perception)
- Achromatopsia (no color perception)

For each simulation:
- Color pair that becomes indistinguishable
- Solution: add non-chromatic differentiator (pattern, icon, label, border)

**4) Usage Rules:**
- Allowed pairs (text/background) with documented ratio
- Forbidden pairs (never use together)
- Minimum text size per color pair
- When to use additional border for contrast guarantee
- Charts and data viz: alternative palette with hatch/pattern fills

**5) Accessible Dark Mode:**
- Smart inversion: not simply inverting all colors
- Reduced saturation to reduce visual fatigue
- Text on dark background: white (87% opacity) for primary, 60% for secondary
- Accent colors: adjust lightness to maintain contrast in dark mode

**6) High Contrast Mode:**
- Support for `forced-colors` / Windows High Contrast Mode
- Fallback to outline for elements relying on background color
- Test with browser in high contrast mode

**7) Implementation and Validation:**
- CSS custom properties with fallbacks
- Automated tests: axe-core contrast checks in CI
- Design tokens updated with documented ratios
- Storybook addon-a11y: real-time preview
- Designer checklist before handoff

Recommended tools: [Stark, Color Contrast Analyzer, axe DevTools, Colorblindly, Figma A11y plugin].