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.
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.