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].\\\\\\\\n\\\\\\\\nCurrent state: [NUMBER] contrast violations identified. Current colors: [LIST OF HEX COLORS].\\\\\\\\n\\\\\\\\n**1) Current Contrast Audit:**\\\\\\\\nFor each color pair used in the product:\\\\\\\\n- Text on background: current ratio vs. required (4.5:1 normal, 3:1 large)\\\\\\\\n- UI components on background: current ratio vs. required (3:1)\\\\\\\\n- Status: PASS/FAIL for AA and AAA\\\\\\\\n- Tools: Color Contrast Analyzer, Stark (Figma plugin)\\\\\\\\n\\\\\\\\n**2) Redesigned Palette:**\\\\\\\\nFor each brand color:\\\\\\\\n- Original value -> adjusted value (minimum change possible)\\\\\\\\n- Delta E (perceptual difference) between original and adjusted\\\\\\\\n- Approval: acceptable adjustment for brand team?\\\\\\\\n- Light/dark variations that maintain contrast\\\\\\\\n\\\\\\\\nFor semantic colors (success, error, warning, info):\\\\\\\\n- Values that pass contrast on white AND on dark\\\\\\\\n- Alternative that doesn't rely on color alone (icon, text, pattern)\\\\\\\\n\\\\\\\\n**3) Color Blindness Simulation:**\\\\\\\\nTest each critical combination in:\\\\\\\\n- Protanopia (no red perception)\\\\\\\\n- Deuteranopia (no green perception)\\\\\\\\n- Tritanopia (no blue perception)\\\\\\\\n- Achromatopsia (no color perception)\\\\\\\\n\\\\\\\\nFor each simulation:\\\\\\\\n- Color pair that becomes indistinguishable\\\\\\\\n- Solution: add non-chromatic differentiator (pattern, icon, label, border)\\\\\\\\n\\\\\\\\n**4) Usage Rules:**\\\\\\\\n- Allowed pairs (text/background) with documented ratio\\\\\\\\n- Forbidden pairs (never use together)\\\\\\\\n- Minimum text size per color pair\\\\\\\\n- When to use additional border for contrast guarantee\\\\\\\\n- Charts and data viz: alternative palette with hatch/pattern fills\\\\\\\\n\\\\\\\\n**5) Accessible Dark Mode:**\\\\\\\\n- Smart inversion: not simply inverting all colors\\\\\\\\n- Reduced saturation to reduce visual fatigue\\\\\\\\n- Text on dark background: white (87% opacity) for primary, 60% for secondary\\\\\\\\n- Accent colors: adjust lightness to maintain contrast in dark mode\\\\\\\\n\\\\\\\\n**6) High Contrast Mode:**\\\\\\\\n- Support for \\\\\\\\\\\\\\\\\\\\\\\`forced-colors\\\\\\\\\\\\\\\\\\\\\\\` / Windows High Contrast Mode\\\\\\\\n- Fallback to outline for elements relying on background color\\\\\\\\n- Test with browser in high contrast mode\\\\\\\\n\\\\\\\\n**7) Implementation and Validation:**\\\\\\\\n- CSS custom properties with fallbacks\\\\\\\\n- Automated tests: axe-core contrast checks in CI\\\\\\\\n- Design tokens updated with documented ratios\\\\\\\\n- Storybook addon-a11y: real-time preview\\\\\\\\n- Designer checklist before handoff\\\\\\\\n\\\\\\\\nRecommended tools: [Stark, Color Contrast Analyzer, axe DevTools, Colorblindly, Figma A11y plugin].