Designing for the Color Blind

via: http://webaim.org/articles/visual/colorblind#designing

other sources:
Designing maps for the colour-vision impaired
Bernhard Jenny and Nathaniel Vaughn Kelso
Bulletin of the Society of Cartographers SoC, 41, p. 9-12, 2007.

Low resolution PDF (174 KB)

Color Design for the Color Vision Impaired
Bernhard Jenny and Nathaniel Vaughn Kelso
Cartographic Perspectives, 58, p. 61-67, 2007.
Low resolution for screen reading (706 KB)
High resolution for print (20.3 MB)

Visual Disabilities
Color-blindness

You are here:Home > Articles > Visual Disabilities > Page 4: Color-blindness

Article Contents

1. Page 1: Introduction
2. Page 2: Blindness
3. Page 3: Low Vision
4. Current page:Page 4: Color-blindness
   1. Types of Color-blindness
      1. Red-green deficiencies
      2. Other deficiencies
   2. Designing for Color-blindness
   3. Key Concepts

Types of Color-blindness

Before getting into the details of the types of color-blindness, you should know that the following explanations are simplified versions of the complete picture. Color-blindness is a fascinating topic precisely because of its complexity. You do not need to understand all of the details of color-blindness to know how to create web content that is accessible to those who are color-blind. Here is an important fact to understand right off the bat:

Important

The key principle of web accessibility for users with color-blindness is:

1. Perceivable: because they cannot perceive (see) the difference between certain color combinations

The colors with which they have difficulty distinguishing depend upon their type of color-blindness, but red-green deficiencies are the most common.

Red-green deficiencies

The most common broad category of color-blindness is often called red-green color-blindness, but this does not mean that these people cannot see reds or greens. They simply have a harder time differentiating between them. Not all reds and greens are indistinguishable. It would be easy for someone with a red-green deficiency to tell the difference between a light green and a dark red, for example. A lot depends—at least in part—on how dark the colors are. If the red is approximately as dark as the green, there is a greater likelihood that the colors will be confused.

Also, there is some evidence that people with red-green color-blindness see reds and greens as yellows, oranges and beiges. This means that yellows, oranges, and beiges can be confused with greens and reds. The colors least affected are the blues.

Protanopia and protanomaly (red deficiencies)

  

The color receptors (cones) in the eyes of people with protanopia are not sensitive to long wavelengths (the reds). Reds look more like beiges and appear to be somewhat darker than they actually are. The greens tend to look similar to the reds. Protanomaly is milder than protanopia, but the end result is similar. Although many people with protanomaly can distinguish some reds and greens, they cannot do so as easily as someone with color-normal vision, and, as with protanopia, reds tend to look darker as well.

Experience it for yourself

Normal

Protanopia

Deuteranopia and deuteranomaly (green deficiencies)

  

Deuteranopia and deuteranomaly are the most common forms of color-blindness. People with these conditions have cones that are insensitive to medium wavelengths (greens), but the end result is similar to protanopia, with the exception that reds do not look as dark. Deuteranomaly is the less serious of the two conditions. Although individuals with deuteranomaly probably cannot see reds and greens in the same way that color-normal people can, they can often distinguish between the shades of reds and greens relatively accurately.

Experience it for yourself

Normal

Deuteranopia

Other deficiencies

Tritanopia (blue deficiencies)

  

Tritanopia is much less common than the other categories mentioned above. Tritanopia is the insensitivity to short wavelengths (the blues). In general blues and greens can be confused, but yellows are also affected in that they can seem to disappear or appear as lighter shades of red.

Experience it for yourself

Normal

Tritanopia

Rod monochromacy or achromacy (no color)

  

This group constitutes an extremely small minority among people who are color-blind. The cones of the eye are non-functional, so the rods (receptors which can only differentiate between light and dark) are the only available source of visual information. Individuals with achromacy see no color at all. Theirs is a world of black, white, and shades of gray. They often have poor visual acuity and have an aversion to bright light. This is the only group for which "color-blindness" is a label that fits, since all other groups have the ability to see some color.

Experience it for yourself

Normal

Achromacy

Designing for Color-blindness

When designing web content for people who are color-blind you do NOT have to convert all of your images to black and white or get rid of your images entirely. In fact, you may not have to change any of your images at all. Here is the key:

Important

Make sure that colors are not your only method of conveying important information.

Most of the time when people put images on the web, the fact that they are in color at all is irrelevant. It may be nicer to see the colors, but the viewer can understand the image just fine even with all of the colors removed. If, however, the purpose of posting the image is to communicate something about the colors in that image, then it is important to provide some other way of understanding the information. For example, if the image shows the routes of the London Underground, where the routes are distinguished only by the color of the lines, as in the graphic below, you would want to somehow annotate either the graphic itself (and supply the appropriate alt text) or the text in the web page to supplement the color-dependent method of distinguishing between routes.

 

Incidentally, people with color-blindness are not the only ones who will benefit from this technique. Those who are blind are also unable to distinguish between colors, and so are in need of the extra cues given through other methods.

Key Concepts

Key Concepts for Color-blindness

Challenges	Solutions
Reds and greens are often indistinguishable	This is not normally a problem except in cases where the colors convey important information. Under these circumstances you will need to either change the graphic or provide an additional means of obtaining the same information. Oftentimes the most appropriate way to do this is to provide an explanation in the text itself.
Other colors may be indistinguishable	Same as above.