Use contrast to direct attention

🌱Planted March 25, 2021.
Last tended October 11, 2021.
evergreen 🌲
1 minute read ⏱

Visual contrast attracts focus. Borders create contrast between content and its container. Content within a border lacks contrast. Attention is drawn to the edges.

Minimize the contrast of content that isn’t a focus. Align contrast levels with the prominence of the content. Important content should contrast its surroundings. Reduce emphasis on less critical content with lower contrast.

Contrast can be changed using size, color, spacing, lines, and images. Visual contrast is a relative measure. Making something red doesn’t necessarily make it high contrast. What if the background is also red? Change contrast in context.


Source Creator
Refactoring UI @Steve Schoger