Laws & Patterns
UX Law

Contrast Principle

Use high contrast to draw user attention and emphasize key elements.

Definition

The Contrast Principle refers to the use of distinct visual differences between elements to draw users' attention and create emphasis. High contrasting elements stand out, guiding the user’s eye to important information or actions.

Do

  • Use high contrast for primary action buttons or important information
  • Use contrast to visually group or separate different elements
  • Adjust contrast levels based on the importance of elements

Avoid

  • Don't use high contrast for all elements, as it can lead to visual clutter
  • Don't use high contrast for unimportant information or actions
  • Don't ignore accessibility standards while applying contrast

When to apply

  • When you want to draw attention to a specific element
  • When you want to distinguish between different types of information or actions
  • When you want to guide user's eye through a sequence of actions

Related topics

accessibilityattentioncontrastemphasisusability

Similar principles

Cognitive Bias

Aesthetic-Usability Effect

Designs that are aesthetically pleasing are perceived as more usable by users.

Cognitive Bias

Cheerleader Effect

Individual items appear more attractive when displayed alongside similar items.

Cognitive Bias

Law of Prägnanz

Users simplify complex visuals to the most organized form possible

Have this and 100+ more in your pocket.

Download on the App Store
Next principleCuriosity Gap
→