Design Principle
Color semantics weaken under color blindness, low vision, printing, and poor lighting.
Principle Color semantics weaken under color blindness, low vision, printing, and poor lighting.
Design action Pair every semantic color with text or icon; charts should add shape, label, or line style, and selection should add border or checkmark.
Examples Positive example: Charts, form errors, status labels, and selected filters. Counterexample: Red/green are the only success/failure distinction.
Apply when Charts, form errors, status labels, and selected filters. More than three colors appear.
Source notes Source note: Synthesized from W3C WCAG 2.2, Apple Accessibility, IBM Carbon Accessibility, and accessibility practices in major design systems.
Agent Directive
Pair every semantic color with text or icon; charts should add shape, label, or line style, and selection should add border or checkmark.