Contrast & visual acuity

Lateral inhibition

A process that emphasizes boundaries or edges between objects of different luminance. Used to assist detecting objects by increasing the perceived brightness contrast between them.

Image on the left demonstrating squares of different luminosity, compared to a simulation on the right of the lateral inhibition and its affect on emphasizing the boundaries between squares. Image on the left demonstrating squares of different luminosity, compared to a simulation on the right of the lateral inhibition and its affect on emphasizing the boundaries between squares.

Examples

White's illusion

The lightness of a color (gray) when placed near black appears brighter than the same color placed near white.

The gray rectangles displayed over black and white stripes appear to have different lightnesses. Move the slider to reveal the illusion.

Mach bands illusion / fluting

An illusion where the contrast between adjacent values appears to increase. The gray values are solid and measured with equal difference in lightness. However, they appear to have a gradient-like appearance when viewed adjacently.

The sequence of grays appear as gradients, demonstrated by chart of perceived luminance, despite being solid colors as demonstrated by step chart of actual luminance. The sequence of grays appear as gradients, demonstrated by chart of perceived luminance, despite being solid colors as demonstrated by step chart of actual luminance.

How it affects UI design

When creating a color system, analyzing colors as a color scale can be affected by the perceptual effects of lateral inhibition. Evaluate colors adjacently, separately, and in the context of a user interface.

Be cautious of using high contrast colors for non-essential elements of an interface. The perceived contrast can draw unnecessary attention to these elements and may affect contrast discrimination.

Not all people have the same contrast sensitivity. Consider personalization settings to give users the ability to adjust contrast to meet their needs.

Supporting iOS increase contrast mode and Windows high contrast mode will help users with low contrast sensitivity.

Sources:

  1. Thomas Norton, David Corliss, James Bailey (2020). The Psychophysical Measurement of Visual Function. 1st edition. Butterworth-Heinemann. Pages 143, 175
  2. Vicki Bruce, Patrick R. Green, Mark A. Georgeson (2003). Visual Perception. 4th edition. Psychology Press. Pages 27-28
  3. Linda Holtzschue (2017). Understanding color: an introduction for designers. 5th edition. John Wiley & Sons, Inc. Pages 51, 117
  4. Ashish Bakshi, Kuntal Ghosh. A Neural Model of Attention and Feedback for Computing Perceived Brightness in Vision. ScienceDirect. https://www.sciencedirect.com/topics/neuroscience/lateral-inhibition
  5. Lateral inhibition. Wikipedia. https://en.wikipedia.org/wiki/Lateral_inhibition