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. WCAG 2.2: https://www.w3.org/TR/WCAG22/ WCAG Contrast Minimum: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html WCAG Non-text Contrast: https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html Apple HIG Accessibility: https://developer.apple.com/design/human-interface-guidelines/accessibility Carbon Accessibility Overview: https://carbondesignsystem.com/guidelines/accessibility/overview/
Agent Directive
Define text-muted, text-strong, border, and icon colors per surface; image overlays need a stable scrim or adjacent text instead.