Designing for the Color-Challenged: A Challenge
About 8% of (Caucasian) males and 0.5% of females exhibit some form of color vision deficiency. Not taking into account their special needs could mean that 1 out of 20 visitors might not be able to use a website at all or only with great difficulty. Text might be illegible and images unrecognizable.
Designing web pages (or any type of user interface for that matter) for individuals with color vision deficiencies can be a challenge. Descriptions on what colors are confused by individuals with color vision deficiencies are abound, but difficult to apply in practice. What does it mean that a particular type of color vision deficiency causes individuals to confuse reds and greens? What colors do such individuals actually perceive? There are also many misconceptions and much misinformation about color vision deficiencies in the Human Factors and HCI literature. These make it difficult to pin down specific recommendations.
In our search for better answers we came across an article by Meyer & Greenberg (1988) which describes a model for calculating how colors are perceived by individuals with various types of color vision deficiency. Based on their article we implemented a slightly simplified version of their model, first in a spreadsheet and more recently as a Java program. It has been used to develop a number of design aids that enable designers to visualize how colors might appear to individuals with color vision deficiencies.
This article starts with a short introduction to color vision. It continues with describing the various types of color vision defects. It then presents a number of design aids and concludes with some general design guidelines.
The retina contains two types of photoreceptors, rods and cones, named after their shapes. Cones are mainly responsible for color perception. There are three types of cones, commonly referred to as red, green and blue cones. They have maximum sensitivities at 575nm (yellow, the descriptive term red is in fact incorrect), 535nm (green), and 445nm (violet). They are also called L, M and S cones (for long, medium and short wavelengths).
Color Vision Deficiencies
One form of color vision deficiency is referred to as anomalous trichromatic. In color matching experiments, anomalous trichromats can match any color by a mixture of three primary colors. However, their matches are different from normal trichromats. The midpoint of matches deviates from the midpoint of normal trichromats and the range of matches is commonly two to three times wider than for normal trichromats.
A distinction is made between simple and extreme anomalous trichromats. Simple anomalous trichromats have a fairly narrow matching range that is outside the matching range for normal trichromats. Extreme anomalous trichromats have a much wider matching range that includes the midpoint for normal trichromats. About half of anomalous trichromats can be classified as simple and the other half as extreme.
A second form of color vision deficiency is described as dichromatic. In color matching experiments, dichromats can match any color by a mixture of only two primary colors.
A third, very rare form of color vision deficiency is called monochromatic. Monochromats cannot discriminate colors and perceive only shades of gray. Individuals with monochromatic vision are truly colorblind (achromatopsia). There are two types of monochromats. Rod monochromats completely lack cones. This condition is associated with reduced visual acuity, hypersensitivity to light (photophobia) and other vision impairments (Nordby, 1996). Cone monochromats have only one cone type. They usually have good visual acuity and none of the other vision impairments found in rod monochromats.
Besides these congenital color vision deficiencies, there are also acquired color vision deficiencies. These may be caused by illness or injury. Color discrimination also declines with age. The loss of discrimination is larger for blues-yellows than for reds-greens, partly because of increased absorption of short wavelength light in the lens.
Color Vision Defects
Individuals with red-green defects confuse colors from red through yellow to green. There are two forms of red-green defects: protan and deutan. Protan defects have a trichromatic form, protanomaly, and a dichromatic form, protanopia. Deutan defects also have a trichromatic form, deuteranomaly, and a dichromatic form, deuteranopia.
Individuals with blue-yellow defects confuse colors from yellow through green to blue. There is only a dichromatic form, tritanopia. The existence of a trichromatic form, tritanomaly, has not been confirmed.
Trichromatic forms are thought to be caused by dysfunctional cones. One cone type is assumed to have a spectral sensitivity similar to the sensitivity of another cone type. Dichromatic forms are thought to be caused by missing cones.
Individuals with protanomaly and protanopia also have a reduced sensitivity to long wavelengths. Reds appear darker than normal.
Deuteranomaly is by far the most common form of color vision defect. About 5% of Caucasian males are affected by it. The other forms of red-green defects are found in about 1% of Caucasian males each. Only about 0.5% of females exhibit red-green defects. Tritanopia and achromatopsia occur in only about 0.005% of both males and females.
The incidence of color vision defects, particular among males, varies greatly between populations. It is about 8% for Caucasian males, 6% for Asian males, and 4% for African males.
Based on the approach by Meyer & Greenberg (1988) we implemented a model that converts any RGB color to a color as it might be perceived by individuals with protanopia, deuteranopia and tritanopia. This model has been used to develop a number of design aids that are described in the following sections.
Using this model raises a number of questions. How do we know that the colors calculated by the model match the colors seen be individuals with color vision deficiencies? Ultimately, it is not possible to determine what colors individuals with color vision deficiencies really perceive. The usual test for such models is to determine whether individuals with color vision deficiencies are able to discriminate between the original color and the color generated by the model. If they are not able to discriminate between the colors, the model is considered to be appropriate. Meyer & Greenberg (1988) report that their model produces fairly accurate matches except for highly saturated colors. Informal feedback we received on our implementation seems to confirm this.
Has the model been validated on individuals with color vision deficiencies? Unfortunately, we have not yet been able to test the model. We did apply the model to some of the tables of the UMIST 'For Fun' Colour Vision Test and were able to reproduce the predicted confusions. If you have some form of color vision deficiency, please have a look at the design aids described in the following sections and let us know how well the model predicts the color you see. Please send your feedback to Thomas Wolfmaier at firstname.lastname@example.org.
How accurate is the model? The model provides only a rough approximation. It includes estimates for some properties of color vision defects as well as assumptions about the hardware on which the colors are displayed. It also does not account for the reduced sensitivity to reds of individuals with protan defects.
Christine Rigden has produced a more extensive collection of lookup tables which are available on her safe colour pages at http://www.labs.bt.com/people/rigdence/colours/. There are some differences between the lookup table in this article and the ones on Christine Rigden's web pages. The table in this article was generated using slightly different parameters and a modified algorithm.
This applet should run in any browser that supports Java. You need to have Java enabled in your browser settings. If you have any problems, please contact Thomas Wolfmaier at email@example.com.
One way to increase the accessibility of your design to individuals with color vision deficiencies is to increase the lightness contrast between foreground and background colors. In general, colors that need to be discriminated should always differ in lightness.
Individuals with color vision deficiencies are often less sensitive to colors on either end of the spectrum. To them, reds and blues appear darker than to individuals with normal color vision. Therefore, avoid combining light colors from either end of the spectrum (reds, blues) with dark colors from the middle of the spectrum (yellows, greens). To individuals with color vision deficiencies, the light colors appear darker and the lightness contrast between the colors is reduced. Instead, combine light colors from the middle of the spectrum with dark colors from either end of the spectrum.
Finally, if you use color coding, always provide redundant cues, such as texture, line shading, location, and explicit labels.
Selected Resources on the Internet
The UMIST 'For Fun' Colour Vision Test:
The ColorMax® website:
© Internet Technical Group
Last update: Mar 6, 1999
hosted by Sandia National Labs
Disclaimer: Neither Sandia Corporation, the United States Government, nor any agency thereof, nor any of their employees makes any warranty, express or implied, or assumes any legal liability or responsibility for the accuracy, completeness, or usefulness of any information, apparatus, product, or process disclosed, or represents that its use would not infringe privately-owned rights. Reference herein to any specific commercial product, process, or service by trade name, trademark, manufacturer, or otherwise does not necessarily constitute or imply its endorsement, recommendation, or favoring by Sandia Corporation, the United States Government, or any agency thereof. The views and opinions expressed herein do not necessarily state or reflect those of Sandia Corporation, the United States Government or any agency thereof.