Considering the Color-Blind
By Chuck Newman
Sometimes my wife will give me instructions like, "Go into the second drawer of the bureau and get the pink skirt." She shows up wondering what's taking me so long, and of course I'm getting everything wrong. She says, "That's the dresser, you're counting from the bottom, that's a dress, and it's peach." We can't agree on a color, yet neither of us is color-blind. I can't imagine what it's like for people who are.
Recently, I was surprised to learn that about 8 percent of men and 0.5 percent of women have some form of color blindness. For some Web sites that could translate to 1 in 12 visitors. That's a larger proportion of visitors than some other groups I consider when designing Web sites. The ratio of visitors viewing the Web with only 256 colors or a 640x480 pixel screen is usually less than 5 percent these days. Now include cross-browser support, older browsers, style sheets, and JavaScript in the mix. If you consider those issues when you design Web sites, you should consider your color-blind visitors, as well.
Forms of Color Blindness
I remember the first time I found out someone I knew was color-blind. I began asking him the color of things in the room. He was not amused. Still, I would like to ask him what my site looks like to him. At first, I imagined that color-blind people would see my Web site as if it were on a black- and-white TV. But I know that's not the case.
Most color-blind people—99 percent of themhave trouble distinguishing between red and green. These people are said to have a "red-green color blindness." We perceive color because a light particle, or photon, triggers a cell in the eye, called a cone. The cone sends a signal to the brain that it has received a trigger. Each kind of cone is responsible for sensing a range of wavelength—scentering on red, green, or blue. Combinations of these cones fire at different intensities to produce the spectrum of colors in various degrees of brightness and saturation.
Sometimes, the instructions for the cones are genetically "wired" abnormally, causing the cones to react to a different range of light. When this happens, color blindness is the result.
There are two basic kinds of color deficiency: anomalous trichromasy and dichromasy, as well as several categories within those two forms. A dichromatic person tends to have a more severe shifting or weakness, where an anomalously trichromatic person could have a wide range of color blindness. The differences between various forms of color blindness can be subtle and hard to diagnose. "Having done a gazillion color-blind tests, I have been characterized as a red-green dichromat and an anomalous trichromat," says Samu Mielonen, a color-blind person who responded to a survey I conducted.
An anomalously trichromatic person has either the red curve shifted toward the green range, or the green range shifted toward the red. These people are less sensitive to the color range that has shifted. An anomalously trichromatic person might see the green text as lime green, which would be quite hard to read. If the effect is subtle, an anomalously trichromatic person can see all the colors. It's just harder to tell them apart. "Many people think that because the eye is insensitive to a particular color range, that those cones are not functional, but they (actually) see a different range of colors," says Diane Wilson, a Web designer who is color-blind.
When a dichromatic person sees something green, both the red and green cones are activated, in addition to the shifting. Because red and green make yellow, green objects appear yellow. So if a site contains green text on a yellow background, both the text and the background appear yellow, making the text invisible. A dichromatic person with green cones shifted toward the red will also see the green as more yellow. I would have expected the yellowing to occur in the red range. This unpredictability makes simulating color blindness more difficult, and no doubt contributes to the difficulty in diagnosing the exact form of a person's color blindness.
Additional factors that can affect color perception include tumors, aneurysms, glaucoma, and other diseases.
Simulating Color Blindness
Now that you know something about why color-blind people see some colors differently, you can attempt to simulate what they see when they look at your Web sites. I have found sites that suggest which colors work and don't work, but they didn't satisfy me. I wanted some way to get an idea of what color-blind people actually see.
After understanding the shifting problem, I attempted to mimic no red by using the color channel features found in many graphics programs like Adobe Photoshop and Jasc Paint Shop Pro. I combined the green channel into both the green and red channels. This technique is described in detail later. To test my method, I created a questionnaire site (see " Online") and found some willing color-blind subjects. However, both my method and my test were flawed. A color-blind person can't evaluate my method, because trying to evaluate it merely compounds the problem. A true test was far more complicated and beyond my capabilities. Fortunately, someone else had already done the research.
Françoise Viénot, Hans Brettel, and John D. Mollon did one such study, which they published in the article "Digital Video Colourmaps for Checking the Legibility of Displays by Dichromats" in the August 1999 issue of Color Research and Application. The article includes color maps that can replace the common browser palette, sometimes called the color cube, or browser-safe palette. The maps should not be applied by loading them onto an image in your graphics program, as many sites suggest. Instead, the study's values must be mapped one-for-one with the color cube (see Figure 1). This can be tedious to do manually, but two online solutions are available.
To adjust colors used in images, you can upload your images to Vischeck (see " Online"), which uses formulas from the aforementioned article to adjust the colors. This is useful for pages with lots of images. You can also take screenshots and upload them to get an idea of how they'll appear to a color-blind person. For adjusting the hexadecimal codes on Web pages, I've developed a page that replaces HTML color values (see " Online"). It turns out that the color maps for both no green and no red are not too different from the color channel technique I mentioned earlier. In a pinch, it could be used as a second, less accurate, alternative. Here's how to perform the technique with Paint Shop Pro 4 or 5.
- Open the image in Paint Shop Pro.
- In the Colors menu, choose Channel Splitting then Split to RGB. Three grayscale images will be created.
- From the Colors menu, choose Channel Combining, then Combine from RGB. The Channel Combining box pops up.
- Remove the check for "Sync blue and green to red."
- Choose blue in blue and green in green but in red, put green as well and click on OK.
Design Guidelines
So, what colors work on the Web and what don't? Black and white work best, of course. The color issue doesn't come into play if everything is in grayscale, so design your site in black and white first. This is a good idea, even without considering color-blind people, because you should never rely solely on color. Enhance each cue with an image, shape, positioning, or text. For example, most links have both a color and an underline. If you use style sheets to remove the underline, the color remains the only cue that there's a link. I've seen sentences in which one different-color word with no underlining contains a link to its definition. Color-blind users would have no cue that there's a link there. One solution would be to have a small graphic of a book next to it.
Color is a particular problem with imagemaps in which clickable areas are delineated by color. The areas could be enhanced by placing underlined text or a black outline in the image. The rollover effect with changing color is often used to denote an image as clickable. Displaying an arrow could enhance this. Placing links together as a menu along the top or down the left side also helps identify them as links.
Not only can most color-blind people see black and white accurately, but they see all shades of yellow and blue. Most color-blind people can even see dimmer shades of yellow like gold and olive, for example.
Another trick is to keep colors bright. Bright colors are the easiest to tell apart. This is especially useful for those with a color weakness. They can see all the colors, but it's hard to tell them apart.
By placing colors against an appropriate background, you can make even less-safe colors visible. You can use red against white, green against black, turquoise against black, and magenta against blackalthough magenta does tend to appear lighter than it does for people who are not color-blind. Also remember that even when using these colors against these backgrounds, something other than color should be used as an additional cue.
Considering that most color-blind people have a red-green color blindness, using red and green together is obviously a bad choice. Actually, red is most easily confused with a darker forest or racing green. With magenta and teal, appearances crisscross the spectrum from turquoise to pink and from orange to green. The grays in between get confused as well.
Another problem is the use of various shades of one color. Shades of turquoise all appear quite light, for example. This is why it's best to keep your colors bright and distinct.
Evaluating Popular Sites
I considered these factors when evaluating several popular Web sites and found that most exhibited one or two problems. I added a half-dozen sites to my evaluation questionnaire. I also asked for recommendations about other sites that are hard to read. Some respondents listed particular sites, but many simply said too many sites are hard to read. They were clearly annoyed. From the results, I've drawn two conclusions: The readability problem is prevalent even among popular sites, and people are bothered by poor readability even if the problem exists only on part of a page or site.
Moviefone and Thestreet.com are two prime examples. Until recently, Moviefone's left-hand navigation had a light orange background with several different color links on it, including green and a darker orange, both of which blend in for color-blind visitors. Thestreet.com shows red and green stock prices against a black background. The red appears as a dim olive and becomes very hard to read when run through Vischeck.com. Neither site should be willing to sacrifice so many of its visitors for such minor design elements.
Closer to Home
The new Web Techniques site passed the readability test. On one hand, the cover image for the May 2000 issue contained mainly orange and green, resulting in a classic problem: The two colors blended into one yellowish olive color. However, the image had contrast, so it was still readable. Besides, the image was not a primary navigational element.
My own site fails miserably. It's full of pages that are all orange or all green. Thank goodness this isn't the case for the customers for whom I've developed sites. Through luck alone, I have used mostly blue and yellow palettes.
Perspective
It takes a little trial and error to understand the color blindness design problem. It also takes a little testing. In the end, you'll be left with a few more rules for Web site design.
You may be willing to sacrifice the fraction of visitors with color blindness to have a flashier site. After all, the palette of acceptable colors is limiting. Other colors might attract more visitors looking for something different. There may also be time when you need those other colors. I was surprised by how common color blindness is. Despite the various types of color blindness, the guidelines provide a way to accommodate the majority of color-blind people. It's time we make our sites accessible to the sizeable population of color-blind Web surfers.
Chuck runs a small Web development shop specializing in ASP applications and user interface design. You can reach him at [email protected].
