logo

Creating Visual Contrast

Contrast is the difference between two elements, such as light versus dark colors. It is the most critical factor for text legibility and directing user attention. 

Contrast is simply the state of being different. In design, we mostly talk about color contrast—light vs. dark. High contrast (black text on white) is readable. Low contrast (yellow text on white) is painful.

This is huge for Accessibility (a11y). We have to ensure our text meets specific contrast ratios so that users with visual impairments can actually read our help docs. But contrast applies to shape too—a round button stands out on a grid of square cards. Design is essentially the management of contrast: knowing what to highlight and what to push back.

Design