Color appearance phenomena

Simultaneous contrast

Simultaneous contrast is an illusion where the appearance of a color's hue, saturation (chroma), or lightness are affected by adjacent colors.

These shifts in appearance follow the dimensions of the opponent process channels.

Examples

Simultaneous lightness contrast

The perceived lightness of a color is affected by adjacent colors.

In this example, both internal squares appear to be the same lightness. Move the slider to bring them together and reveal if that is true.

Simultaneous hue contrast

The perceived hue of a color is affected by adjacent colors.

In this example, both internal squares appear to be the same hue. Move the slider to bring them together and reveal if that is true.

Simultaneous saturation contrast

The perceived saturation of a color is affected by adjacent colors.

In this example, both internal squares appear to be the same saturation. Move the slider to bring them together and reveal if that is true.

How it affects UI design

Chromatic background colors will affect the appearance of colors in your design.

Sometimes a color can be changed simply by changing its surrounding color.

Users with color vision deficiencies may not experience this simultaneous contrast, or will not experience it for certain colors. Do not rely on simultaneous contrast as a mechanism for distinguishing UI elements.

Users with a low contrast sensitivity may not experience this simultaneous contrast, or will not experience it for certain colors.

The chroma of a color can be perceived differently between light and dark modes as a result of the Bezold effect.

Sources:

  1. Mark D. Fairchild (2013). Color Appearance Models. 3rd edition. John Wiley & Sons, Ltd. Pages 116-118
  2. Thomas Norton, David Corliss, James Bailey (2020). The Psychophysical Measurement of Visual Function. 1st edition. Butterworth-Heinemann. Pages 175
  3. Linda Holtzschue (2017). Understanding color: an introduction for designers. 5th edition. John Wiley & Sons, Inc. Pages 96-98
  4. Mary Stewart (2006). Launching the imagination: a comprehensive guide to basic design. 2nd edition. McGraw-Hill. Pages 383