Simultaneous Contrast

1 Color Appears as 2

How the same color looks completely different on different grounds

Key Insight

Albers' foundational exercise: place the same color on two different grounds, and it will appear as two different colors. The perceived value (lightness/darkness), hue, and saturation all shift based on the surrounding color. A medium grey appears lighter on black and darker on white. A warm orange appears cooler next to a warmer red. This principle underlies every multi-color design decision.

Key Points

  • •One physical color can produce two (or more) perceptually distinct appearances
  • •Dark grounds make colors appear lighter; light grounds make them appear darker
  • •Warm grounds push colors toward cool; cool grounds push colors toward warm
  • •High-saturation grounds reduce the apparent saturation of contained colors
  • •The "same" color in a UI may look inconsistent because it appears on different backgrounds

Guidelines

  • ✓Test every color combination — don't assume a color will look the same across contexts
  • ✓When a color must look consistent across different backgrounds, create adjusted variants
  • ✓In dark mode, colors need separate specifications — the same hex will look different
  • ✓Use contrast checks contextually: evaluate color pairings, not colors in isolation

Want to learn this interactively?

Experience hands-on experiments and test your understanding.

Start Learning
🔥

Practice this topic

Active recall — strengthens long-term retention

Related Topics