Sensory adaptations

Contrast adaptation

A process of the visual system to increase or decrease contrast sensitivity in response to surrounding contrast.

This adaptation occurs by neurons in the visual cortex over a matter of seconds.

Side by side of two identical paintings of a Catholic cathedral, except the first image has normal or high contrast, and the second has lower contrast. Monet's Rouen Cathedral, Portal and Tower Saint-Romain in the Sun and Rouen Cathedral, West Façade

Example

Chubb illusion

The central, highlighted checkerboard on both sides of the image appear to have the same contrast for their internal squares.

Move the slider to reveal how different the two highlighted checkers are. The internal checkers do not change.

This illusion demonstrates how perceived contrast and actual contrast can differ due to the effects of contrast adaptation.

Illusion

How it affects UI design

When an entire screen design is lower in contrast, high contrast elements will have a greater perceived contrast, as the viewer will have adapted to the lower contrast surroundings.

Avoid designing an entire interface in high contrast. Viewers will adapt to the high contrast and have less ability to discriminate visual hierarchy or identify more important elements.

Sources:

  1. National Institute of Health (National Center for Biotechnology Information). https://www.ncbi.nlm.nih.gov/pmc/articles/PMC1475737
  2. Masoud Ghodrati, Elizabeth Zavitz, Marcello G. P. Rosa, Nicholas S. C. Price. Contrast and luminance adaptation alter neuronal coding and perception of stimulus orientation. Nature.com (Nature Communications). https://www.nature.com/articles/s41467-019-08894-8
  3. Contrast Adaptation in Visual Cortical Neurons. Yale School of Medicine. https://medicine.yale.edu/lab/mccormick/seminars/contrast/
  4. Rouen Cathedral (Monet series). Wikipedia. https://en.wikipedia.org/wiki/Rouen_Cathedral_(Monet_series)n