Skip to content

[UI/UX Design] Test and document a color-blind-safe palette across critical signals #158

Description

@thlpkee20-wq

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

Metadata

Metadata

Assignees

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions