Color vision simulation

The simulator in the Accessibility Inspector in Firefox Developer Tools lets you see what a web page would look like to users with various forms of color vision deficiency (better known as "color blindness"), as well as contrast sensitivity loss.

"Color blindness" is a bit of a misnomer, since most people with these disorders can see colors, but do not see all of the distinctions that people with normal color vision can see; color vision deficiencies affect perception across the color spectrum, not only of specific colors like red or green. Color vision deficiencies affect about 8% of men, and 0.5% of women. The most common forms of color blindness (commonly lumped together as "red-green color blindness") affect more men than women, because they are due to a mutation in a gene in the X chromosome, which men usually have only one copy of.

Contrast sensitivity loss can be caused by cataracts, glaucoma, diabetic retinopathy, and other disorders of the retina; it can be age-related, congenital, or due to an injury.

To enable this feature, you must have webrender enabled; it may be enabled by default, depending on your configuration of Firefox. In the Firefox Configuration Editor, make sure the gfx.webrender.all option is set to true.

In the Simulate menu, you can choose one option at a time from the following list:

  • None — choose this to return to normal display
  • Protanomaly (low red)
  • Deuteranomaly (low green)
  • Tritanomaly (low blue)
  • Protanopia (no red)
  • Deuteranopia (no green)
  • Tritanopia (no blue)
  • Contrast loss

These simulations are not completely medically accurate. However, they can give you a sense of what your web site looks like to users with vision problems, and therefore help you judge whether you need to make adjustments in your color or contrast choices.

The following table shows a colorful image of a cat's face, and what it looks like in the various simulations.

Simulation Image displayed
None Colorful image of a cat's face, without modification
Protanomaly (low red) Colorful image of a cat's face, with deuteranomaly simulation
Deuteranomaly (low green) Colorful image of a cat's face, with deuteranomaly simulation
Tritanomaly (low blue) Colorful image of a cat's face, with tritanomaly simulation
Protanopia (no red) Colorful image of a cat's face, with protanopia simulation
Deuteranopia (no green) Colorful image of a cat's face, with deuteranopia simulation
Tritanopia (no blue) Colorful image of a cat's face, with tritanopia simulation
Contrast loss Colorful image of a cat's face, with contrast loss simulation

See also