Description
Several status colors are too close on protanopia/deuteranopia simulations. Test the current critical-signal palette (success, warning, error, info, pending) under three CVD simulators and revise to a color-blind-safe alternative with paired icons.
Requirements and context
- Must be accessible (WCAG 2.1 AA), responsive, and documented in the design system
- Should be consistent with existing patterns and easy to review
- Relevant code:
src/index.css
- Each signal must remain distinguishable under protanopia, deuteranopia, and tritanopia
Suggested execution
- Fork the repo and create a branch
git checkout -b uiux/colorblind-palette
- Implement changes
- Run CVD simulations and document failures
- Propose revised hues with locked icon pairs
- Update design-system documentation
- Validate accessibility and responsive assumptions
Test and commit
- Run checks
npm run lint and component/visual tests
- Cover edge cases
- Charts, status pills, alerts, focus rings, dark mode
- Include screenshots/before-after and accessibility (axe) notes
Example commit message
design: color-blind safe palette for critical signals
Guidelines
- Minimum 95 percent test coverage
- Clear documentation
- Timeframe: 96 hours
Description
Several status colors are too close on protanopia/deuteranopia simulations. Test the current critical-signal palette (success, warning, error, info, pending) under three CVD simulators and revise to a color-blind-safe alternative with paired icons.
Requirements and context
src/index.cssSuggested execution
git checkout -b uiux/colorblind-paletteTest and commit
npm run lintand component/visual testsExample commit message
design: color-blind safe palette for critical signalsGuidelines