Contrast & visual acuity

Contrast discrimination

(Contrast constancy)

The ability to distinguish differences in contrast between objects. "Contrast constancy" is identifying consistent contrast between objects on different surrounding backgrounds.

An example of a test for evaluating contrast discrimination (Cannon and Fullenkamp 1991). The inner circle has lower contrast than the outer ring. An example of a test for evaluating contrast discrimination (Cannon and Fullenkamp 1991). The inner circle has lower contrast than the outer ring.

How it affects UI design

Surrounding elements and their contrast can affect the perception of contrast for other elements on screen.

A large amount of high contrast non-essential elements can affect the perceived contrast and identifiability of text or components.

When comparing and evaluating dark and light mode or various color themes, contrast constancy is the subjective method of comparing colors to appear to have a consistent contrast between modes. The perceived contrast and calculated contrast may not match. Ensure your colors meet or exceed WCAG 1.4.3 (contrast minimum).

Sources:

  1. Vicki Bruce, Patrick R. Green, Mark A. Georgeson (2003). Visual Perception. 4th edition. Psychology Press. Pages 152-153
  2. Y. Adini, Amos Wilkonsky, Roni Haspel, Misha Tsodyks, Dov Sagi. Perceptual learning in contrast discrimination: The effect of contrast uncertainty. https://jov.arvojournals.org/article.aspx?articleid=2192665#:~:text=Contrast%20discrimination%20is%20a%20basic,%2Dbase%20levels%20(pedestals).
  3. Chubb illusion. Wikipedia. https://en.wikipedia.org/wiki/Chubb_illusion