Visual impairments

Dichromacy

(Dichromatic vision)

A type of color vision deficiency where one of the cone pigments is missing, resulting in only two wavelength sensitivities.

Examples of tritanopia (missing short / blue cones), deuteranopia (missing medium / green cones), and protanopia (missing long / red cones). Examples of tritanopia (missing short / blue cones), deuteranopia (missing medium / green cones), and protanopia (missing long / red cones).

Deuteranopia

This type of color vision is caused by missing medium wavelength (green) cones.

Deuteranopia affects 1.27% of males and 0.01% of females.

Example image simulating deuteranopia Example image simulating deuteranopia

Protanopia

This type of color vision is caused by missing long wavelength (red) cones.

Protanopia is less common and affects 1.01% of males and 0.02% of females.

Example image simulating protanopia Example image simulating protanopia

Tritanopia

This type of color vision is caused by missing short wavelength (blue) cones.

Tritanopia is very rare and affects 0.0001% of males.

Example image simulating tritanopia Example image simulating tritanopia

How it affects UI design

Designing with color vision deficiencies in mind is important. Most issues can be resolved by compliance with WCAG 1.4.1 (use of color) and 1.4.3 (contrast minimum).

When color identification is important to all sighted users, use a color tool to evaluate color difference for each color deficiency type.

Sources:

  1. J.D. Mollon, J. Pokorny, K. Knoblauch (2003). Normal & Defective Colour Vision. Oxford University Press. Pages 202-201
  2. R.W.G. Hunt, M.R. Pointer (2011). Measuring Colour. John Wiley & Sons, Inc. Pages 438, 445
  3. Daniel Flück. Types of color blindness. Colblindor. https://www.color-blindness.com/types-of-color-blindness/
  4. Andrew Somers. Color vision deficiency simulator. Myndex Research. https://www.myndex.com/CVD/
  5. Success Criterion 1.4.1 Use of Color. Web Content Accessibility Guidelines (WCAG) 2.1. https://www.w3.org/TR/WCAG21/#use-of-color
  6. Success Criterion 1.4.3 Contrast (Minimum). Web Content Accessibility Guidelines (WCAG) 2.1. https://www.w3.org/TR/WCAG21/#contrast-minimum