Color vision

Chromatic aberration

Different wavelengths of light refract through a lens at different angles. This causes focal points to be at different depths of the retina resulting in an effect called chromostereopsis.

Chromatic aberration can be caused by the lens and exaggerated by conditions such as astigmatism, myopia (nearsightedness), or hyperopia (farsightedness).

Short (blue), medium (green), and long (red) wavelengths refract at different angles resulting in unique focal depths. Short (blue), medium (green), and long (red) wavelengths refract at different angles resulting in unique focal depths.

How it affects UI design

Be sensitive to juxtaposing highly saturated reds and blues, as they will create a "vibration" appearance called chromostereopsis. This can be unpleasant and causes text legibility issues.

Defocused blue light from chromatic aberration can cause digital eye strain. This does not mean blue color should be avoided, as many colors (including white) include blue light.

Supporting dark mode and Windows high contrast mode can help viewers avoid eye strain.

Sources:

  1. Vicki Bruce, Patrick R. Green, Mark A. Georgeson (2003). Visual Perception. 4th edition. Psychology Press. Pages 16-17
  2. Blue light refocused - Separating science from speculation. 20/20 Magazine. https://www.2020mag.com/ce/blue-light-refocused-separating-science-35675
  3. Chromatic Aberration: Basic Optics, Chapter 6. American Academy of Opthalmology. https://www.aao.org/Assets/42cd446b-9d31-49a9-bd95-add573cd64e9/637151349610530000/bo26-pdf?inline=1
  4. Hyperopia vs. Myopia: What's the Difference?. WebMD. https://www.webmd.com/connect-to-care/lasik/the-difference-between-hyperopia-and-myopia
  5. Astigmatism. Mayo Clinic. https://www.mayoclinic.org/diseases-conditions/astigmatism/symptoms-causes/syc-20353835