Contrast & visual acuity

Visual acuity

The clarity or sharpness of vision, relative to optical blur. It is the measure of how well an image is in focus on the retina.

Example of letter target acuity chart using LogMAR scale. These charts are used for visual acuity testing. Example of letter target acuity chart using LogMAR scale. These charts are used for visual acuity testing.

Visual acuity can be affected by:

How it affects UI design

Visual acuity is a key factor in how sighted users will experience your designs. Edge detection, identifying components, and the legibility and readability of text are directly affected by a user's visual acuity.

Not all people have the same visual acuity. WCAG 1.4.3 (contrast minimum) provides a general threshold for making text & components perceivable to most sighted users.

Typographic sizes and font weights affect the perception of contrast in text. Lighter font weights (or smaller text) should use higher contrast colors.

In some cases, users may benefit from higher contrast than recommended minimums, whereas other users may be negatively impacted by high contrast interfaces. 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.

Additional factors need to be considered from related sources below.

Sources:

  1. Vicki Bruce, Patrick R. Green, Mark A. Georgeson (2003). Visual Perception. 4th edition. Psychology Press. Pages 15, 17
  2. Linda Holtzschue (2017). Understanding color: an introduction for designers. 5th edition. John Wiley & Sons, Inc. Pages 43-45
  3. Visual Acuity. American Optometric Association. https://www.aoa.org/healthy-eyes/vision-and-vision-correction/visual-acuity
  4. Types of low vision. Web Content Accessibility Guidelines (WCAG) 2.1. https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Types_of_Low_Vision
  5. Visual acuity. Wikipedia. https://en.wikipedia.org/wiki/Visual_acuity
  6. . Vector Vision. https://vectorvision.com/contrast-sensitivity-background/