Design Principle
Low contrast turns polish into unusability, especially on mobile and in difficult lighting.
Principle
Low contrast turns polish into unusability, especially on mobile and in difficult lighting.
Design action
Keep body and key labels high contrast; disabled states may reduce saturation but must remain recognizable, and button text must be readable on its surface.
Examples
Positive example: Buttons, tags, cards, and form feedback containing text. Counterexample: Gray text sits on gray surfaces.
Apply when
Buttons, tags, cards, and form feedback containing text. Light and dark surfaces alternate.
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
Keep body and key labels high contrast; disabled states may reduce saturation but must remain recognizable, and button text must be readable on its surface.