Designing for the Color-Challenged: A Challenge
Thomas G. Wolfmaier, twolfmaier@acm.org
Human-Computer Interaction Resources Network
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.
Color Vision
Color is a visual sensation produced by electromagnetic radiation incident on the retina. The segment of the electromagnetic spectrum that can be perceived by humans is called the visible spectrum. The visible spectrum ranges from approximately 380 to 730nm (nanometer = 10-9m). Light at the high end of the visible spectrum (730nm) is perceived as red, light at the low end of the visible spectrum (380nm) is perceived as violet. The range of colors over the spectrum is captured in the mnemonic ROY G BIV (red, orange, yellow, green, blue, indigo, violet).
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
Normal color vision is described as trichromatic. This term originates from color-matching studies. In color matching experiments, trichromats can match any color by a mixture of three primary colors. There is a considerable amount of variance in color-matching abilities of normal trichromats.
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
Two main types of defects can be distinguished: red-green defects and blue-yellow defects. Red-green defects occur in trichromatic and dichromatic forms. For blue-yellow defects, only a dichromatic form has been generally accepted.
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.
Table 1.
Color vision defects
| Type | Form | Cause |
| Red-Green Defects | ||
| protanomaly | trichromatic | dysfunctional L cones |
| protanopia | dichromatic | missing L cones |
| deuteranomaly | trichromatic | dysfunctional M cones |
| deuteranopia | dichromatic | missing M cones |
| Blue-Yellow Defects | ||
| tritanopia | dichromatic | missing S cones |
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.
- Protanomaly is caused by dysfunctional L (long wavelength, also called red) cones. In this case, L cones have a spectral sensitivity similar to M (medium wavelength or green) cones.
- Protanopia is caused by missing L cones.
- Deuteranomaly is caused by dysfunctional M cones. M cones have a spectral sensitivity similar to L cones.
- Deuteranopia is caused by missing M cones.
- Tritanopia is caused by missing S (short wavelength or blue) cones.
Individuals with protanomaly and protanopia also have a reduced sensitivity to long wavelengths. Reds appear darker than normal.
Figure 1.
The spectrum as perceived by individuals with normal color vision, protanopia, deuteranopia and tritanopia
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.
Table 2.
Incidence of color vision defects
| Type | Incidence (%) | |
| Males | Females | |
| protanomaly | 1 | 0.02 |
| protanopia | 1 | 0.02 |
| deuteranomaly | 5 | 0.4 |
| deuteranopia | 1 | 0.01 |
| tritanopia | 0.005 | 0.005 |
| achromatopsia | 0.005 | 0.005 |
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.
Design Aids
For designers the problem is to select color combinations that can be discriminated by individuals with different types of color vision deficiency. One approach is to try to simulate the colors that are perceived by such individuals. A few models have been proposed for this purpose (e.g., Brettel et al., 1997; Meyer & Greenberg, 1988). These models are generally limited to dichromatic defects. Since dichromatic defects represent a worst case scenario, they provide a useful starting point for evaluating color combinations.
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 twolfmaier@acm.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.
Lookup Table
We generated a lookup table (60k) that displays the 216 colors of the so-called browser-safe color palette and how these colors are perceived by individuals with protanopia, deuteranopia and tritanopia. This table can be used to quickly assess how a color might appear to such individuals.
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.
Applet
For more elaborate evaluations we developed a small applet. Designers can enter any foreground and background color into the applet and the applet calculates how these colors appear to individuals with protanopia, deuteranopia and tritanopia. The applet also provides an example of the resulting color combinations.
Figure 2.
The applet for calculating dichromatic colors
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 twolfmaier@acm.org.
Palette Files
Christine Rigden produced palette files that convert entire images in GIF format to colors as seen by protanopes and deuteranopes. You can find the palette files and instructions on how to use them on her safe colour pages at http://www.labs.bt.com/people/rigdence/colours/.
Design Guidelines
Considering the enormous variations in color vision deficiencies, it is difficult to come up with a color scheme that accommodates all types of deficiencies.
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
Christine Rigden's safe colour pages:
http://www.labs.bt.com/people/rigdence/colours/
Contains a number of useful design aids for making web pages accessible to individuals with color vision deficiencies.
The UMIST 'For Fun' Colour Vision Test:
http://www.umist.ac.uk/UMIST_OVS/UES/COLOUR0.HTM
An online test for color vision deficiencies.
The ColorMax® website:
http://www.color-vision.com/
Includes a comprehensive overview of color vision deficiencies.
References
- Brettel, H., Viénot, F., & Mollon, J. D. (1997). Computerized simulation of color appearance for dichromats. Journal of the Optical Society of America A, 14, 10, 2647-2655.
- Meyer, G. W. & Greenberg, D. P. (1988). Colour defective vision and computer graphics displays. IEEE Computer Graphics and Applications, 8, 5, 28-40.
- Nordby, K. (1996). Vision in a complete achromat: A personal account. http://ling.ucsc.edu/~chalmers/achromat.html.
Acknowledgements
Parts of this article have previously been published on the Human-Computer Interaction Resources Network website at http://www.hcirn.com/. They are reproduced with permission from the publisher.
© Internet Technical Group
Last update: Mar 6, 1999
URL: http://www.sandia.gov/itg/newsletter/mar99/accessibility_color_challenged.html
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.