Design Principle
The same color value has different strength on different backgrounds and should not be reused mechanically.
Principle The same color value has different strength on different backgrounds and should not be reused mechanically.
Design action Define text-muted, text-strong, border, and icon colors per surface; image overlays need a stable scrim or adjacent text instead.
Examples Positive example: Light/dark cards, sidebars, dialogs, and image overlays. Counterexample: Dark cards reuse gray text designed for light surfaces.
Apply when Light/dark cards, sidebars, dialogs, and image overlays. Pages contain several surface types.
Source notes Source note: Synthesized from W3C WCAG 2.2, Apple Accessibility, IBM Carbon Accessibility, and accessibility practices in major design systems.
Agent Directive
Define text-muted, text-strong, border, and icon colors per surface; image overlays need a stable scrim or adjacent text instead.