Contrast

Contrast

Contrast is a clear difference between elements, in color, size, weight or shape. It tells people what is different and what matters.

In the example, the low-contrast card fades into its background and the button looks disabled. The clear-contrast card makes the icon, text and Continue button easy to see.

Contrast is also an accessibility requirement. WCAG AA sets a minimum contrast ratio of 4.5:1 for normal text, measured against its background. Combine differences, such as color and weight, so the difference does not rely on color alone.