Export (0) Print
Expand All
Expand Minimize

Can Color-Blind Users See Your Site?

As of December 2011, this topic has been archived. As a result, it is no longer actively maintained. For more information, see Archived Content. For information, recommendations, and guidance regarding the current version of Internet Explorer, see Internet Explorer Developer Center.

Robert Hess
Microsoft Corporation

October 9, 2000

Contents

Color My World
Houston, We Have a Problem
Finding Solutions
Color Contrasts
Cooperative Color Selection

My last few articles have discussed color-related issues, and a few people have asked me to provide some information on how to select colors for Web sites so that someone who is color-blind can properly view them. Following those requests, I've done some research on this topic, and I'd like to provide you with information that will not only help you to understand this requirement better but also will help you to create more readable Web sites.

To begin, let's examine exactly what it means to be color-blind. For one thing, it doesn't mean that the individual is blind to color, or sees things only in black and white. Perhaps a better term to use would be color-deficient.

Color My World

It all starts with the eye, or more specifically with the "cones" in the eye. In school, we all learned that the eye contains rods and cones, which are sensitive to light. The rods and cones communicate this sensitivity to the brain, where an image is built up that allows us to see our surroundings.

Bb263953.hess1000-1(en-us,VS.85).gif
Bb263953.hess1000-19(en-us,VS.85).gif

Figure 1. Normal color vision

I'm going to dive into the nitty-gritty of rods and cones here for a few seconds; if you prefer to cut to the chase, feel free to skip down to the section on finding solutions.

The rods, which far outnumber the cones, are sensitive to differences in brightness within the middle portion of the spectrum of light. If you had only rods, you would see in black and white. The cones in our eyes provide us with our color vision. There are three types of cones.

  • L-cones are sensitive primarily to the red portion of the visible spectrum.
  • M-cones are sensitive to the green portion.
  • S-cones are sensitive to the blue portion.

While red, green, and blue are spaced somewhat equally across the visible spectrum, the specific sensitivities of the L-, M-, and S-cones are not. This might seem a little confusing, especially since the L-cones aren't even closely centered on the red area of the spectrum. Fortunately, the spectral sensitivity of the cones is only one part of how the brain decodes color information. Additional processing takes these sensitivities into account.

Bb263953.hess1000-2(en-us,VS.85).jpg

Figure 2. The three white curves indicate the sensitivity level for the three types of cones. The black curve indicates the sensitivity of the rods.
Dowling, John E. (1987); The Retina : An Approachable Part of the Brain
Belknap Pr; ISBN: 0674766806

Houston, We Have a Problem

Problems with color vision occur when all the cones of one or more types are functioning below normal levels or not at all. Because the genes that affect our color vision are part of the X chromosome, color-deficient vision affects men far more than women. About 8 percent of all men have some form of color deficiency, while only about 0.5 percent of all women have color-deficient vision.

Here are the names given to the different forms of color-deficient vision. I've prepared an example color wheel and palette for each of them. I was able to find very little in the way of practical references to how color is seen by the various color-deficient classifications, but these appear to be the accepted spectral representations. You might look at these and be a little confused as to why they don't quite directly relate to the absence of "red", "green," or "blue." Two factors are at work here. One is that, as the chart above illustrates, the actual color sensitivities of the cones are not directly centered within their specific areas of the spectrum. The second factor involves the further processing in the brain, which actually associates color and image with the rod/cone responses so that the resultant colors seen by color-deficient users will be shifted in an attempt to compensate.

Bb263953.hess1000-3(en-us,VS.85).gif
Bb263953.hess1000-20(en-us,VS.85).gif
Protanopia affects approximately 1 percent of the male population.

Protanopia is the absence of red sensitivity, also referred to as red dichromacy. It's the result of the loss of function of the L cones, which provide us with sensitivity to the red portion of the visible spectrum. With red being at the end of the visible spectrum, there is only a partial overlap of sensitivity with the two other types of cones, and so people with Protanopia have a distinct loss of sensitivity to light at the red end of the spectrum.

Protanomalia affects approximately 1 percent of the male population.

Protanomalia is red weakness, and occurs when the L-cones are functioning, but not at the levels they should be.

Bb263953.hess1000-4(en-us,VS.85).gif
Bb263953.hess1000-21(en-us,VS.85).gif
Deuteranopia affects approximately 1.1 percent of the male population.

Deuteranopia is the absence of green sensitivity, also referred to as green dichromacy. It is the result of the loss of function of the M-cones, which provide us with sensitivity to the green portion of the visible spectrum. Due to the location of green in the spectrum, to the actual sensitivity overlap between the M-cones (green) and L-cones (red), and to the partial overlap with the S-cones (blue), people with Deuteranopia have a fairly normal level of sensitivity throughout the spectrum, although they will still experience confusion among the individual colors.

Deuteranomalia affects approximately 4.9 percent of male population.

Deuteranomalia is green weakness, and occurs when the M-cones are functioning, but not at the levels they should be.

Bb263953.hess1000-5(en-us,VS.85).gif
Bb263953.hess1000-22(en-us,VS.85).gif
Tritanopia affects approximately 0.001 percent of the male population.

Tritanopia is the absence of blue sensitivity, also referred to as blue dichromacy. This is the least common of all forms of color-vision deficiencies, and is the result of the loss of functionality of the S-Cones, which provide sensitivity to the blue portion of the visible spectrum. Because blue is at the opposite end of the spectrum from red, and because the sensitivity of the S-cones has less overlap with the other two cones, people with Tritanopia have a much more severe loss of sensitivity across the spectrum.

Tritanomalia would refer to blue weakness, but there don't appear to be any reported cases of this as a form of color deficiency. This could be because, overall, the S-cones make up only 10 percent of the cones in the eye; by the time an abnormality is perceptible, the cones are, for the most part, non-functional.

Note: The above color samples were built using palettes constructed from data located at http//innovate.bt.com/people/rigdence/colours/colours1.html.

Finding Solutions

By looking at the colors in the palettes above, you can better understand how people who suffer from some form of color deficiency are definitely not going to see the colors that you have painstakingly selected for your Web site.

As a specific example, imagine that you were faced with the following:

Bb263953.hess1000-6(en-us,VS.85).gif
Click the Green button to continue,
the Yellow button if you need help,
or the Red button if you want to quit.

Looks easy, right? But what if you instead saw

  Bb263953.hess1000-7(en-us,VS.85).gif

or

  Bb263953.hess1000-8(en-us,VS.85).gif

or

  Bb263953.hess1000-9(en-us,VS.85).gif

I honestly expect that this sort of scenario rarely happens on Web sites. It is easier to define the buttons with labels, such as "Continue," "Help," or "Quit"; it even takes up less room on the page. But these sorts of things do happen, not only on Web pages but also in real life.

The solution is to avoid using color as the only indication of what to do, or the information you are trying to get across. Instead, use color only as an unimportant hint to the user.

Color Contrasts

As we've seen in my previous articles about color, one important aspect of color choice is strong contrast between foreground and background colors, which makes the text easy to read. This is even more important when considering the color-deficient user.

Look at the color wheels I show above. Now look at the normal color wheel at the top of the page.

You'll notice that the variety of colors for the color deficient user will be greatly decreased from that of a person with full-color vision, and many of the neighboring colors on the color wheel will appear virtually identical. To see how this can affect what you choose for you site design, let's consider a color example.

  Bb263953.hess1000-10(en-us,VS.85).gif

Yes, I know it isn't an appropriate color selection, but it's one that I've seen used on far too many sites. These colors might look garish to you—but if you have normal color vision, you can still read the message that is being shown. But what about somebody who is color deficient?

Some people may say that simply making sure your color selection works well when reduced down to a gray-scale palette should be enough to indicate that it will be appropriate for color-deficient users. I don't think this is quite the case. Let's try reducing the palette used by that image down to a gray-scale palette, and see what it looks like.

  Bb263953.hess1000-11(en-us,VS.85).gif

This might lead you to believe that, as ugly as this color scheme might be, it should be safe for the color deficient user. But is it really? Let's take a more detailed look—and this time, let's apply a palette that more accurately approximates what a color-deficient user might see:

Protanopia:

  Bb263953.hess1000-12(en-us,VS.85).gif

Deuteranopia:

  Bb263953.hess1000-13(en-us,VS.85).gif

Tritanopia:

  Bb263953.hess1000-14(en-us,VS.85).gif

It appears that a person with Tritanopia actually lucks out here. I think the colors they see are a little more appealing than what I see with normal color vision. But you can see that while the image looked fine in the gray-scale palette, it clearly is not a safe color combination for many color-deficient users.

Designers who practice proper color selection would never choose this particular color scheme. Instead, they would select colors with greater contrast to make the information more pleasing to the eye. Let's pretend that for some reason this "green on yellow" sort of color combination is necessary. What can the designer do? We've learned in my previous articles that darkening one color and lightening the other will increase contrast, so let's try keeping the hue of the colors the same while changing their lightness and saturation to provide a better contrast:

Normal:

  Bb263953.hess1000-15(en-us,VS.85).gif

Protanopia:

  Bb263953.hess1000-16(en-us,VS.85).gif

Deuteranopia:

  Bb263953.hess1000-17(en-us,VS.85).gif

Tritanopia:

  Bb263953.hess1000-18(en-us,VS.85).gif

This specific color selection is still not a very good combination, but it is much better than the original. Even with this minor change, we've managed to maintain the basic intent of the original color choices and to produce text that a color-deficient user could read.

If you have a drawing program that can extract color palettes from image files and can apply palettes both as "nearest color" and as "maintain indexes," (such as PaintShop Pro, which is what I use) you can test out your own color choices on the following images. The "Normal" image represents the 216-color Safety Palette; the other images maintain the same indexes, but the colors have been shifted to reflect what a person with color-deficient vision might see.

Normal:

  Bb263953.hess1000-19(en-us,VS.85).gif

Protanopia:

  Bb263953.hess1000-20(en-us,VS.85).gif

Deuteranopia:

  Bb263953.hess1000-21(en-us,VS.85).gif

Tritanopia:

  Bb263953.hess1000-22(en-us,VS.85).gif

Once you have saved the palettes from each of these images out to a separate palette file, follow these steps to test your own images:

  1. Use the PRINT SCREEN key to capture a screen shot of your color scheme.
  2. Paste this image into your image tool.
  3. Apply the "Normal" palette using the "Nearest Color" method.
  4. Apply one of the color deficient palettes using the "Maintain Indexes" method.

Note that many drawing programs may support the use and manipulation of color palettes, but they might provide an option to maintain color indexes when a new palette is switched in. If you aren't sure whether your application can do this, check with the manufacturer, or with other users of that software.

Cooperative Color Selection

As the above exercise will illustrate, it can often be quite challenging to select colors that will be appropriately viewable to all users. Add to this confusion the varying degrees of color-deficient vision for different users—resulting in greater swing in color differences. Then consider the potential for improperly adjusted monitors, resulting in poor contrast even for users with normal color vision. These factors combine to make proper color selection not only important but also difficult.

When you select colors for your Web sites, you can also allow the user to specify the colors displayed on your page. No, this isn't as difficult as it might sound. Cascading style sheet support already includes the notion of a "User style sheet," which allows the user to specify styles that will override whatever the Web designer might have used. However, such a style sheet may be slightly difficult for the common user to construct, and it can accidentally mess up the layout of the Web page.

An easier way to work with users is to leverage the same colors that they have chosen for the Windows operating system to use to display various UI components. Using the Display Settings control panel applet, the user will have already tuned the display colors such that Windows applications can be viewed and used. If you use the same color scheme, your Web site should be safe. A drawback with this approach, however, is that it is not "browser neutral," since only Microsoft Internet Explorer currently uses these keywords.

To use system colors, all you have to do is use the appropriate keywords instead of the color values. For example, instead of using:

<font color="#FFCC9">

you would use:

<font color="windowtext">

which would make your font color the same as what the user had selected as the text color for the Windows operating system.

Here are the available keywords. This first list contains keywords that are paired with an appropriate "text" and "background" color combination.

Foreground colorsBackground colorsProperly combined
captiontext activecaption CaptionText on ActiveCaption
inactivecaptiontext inactivecaption InactiveCaptionText on InactiveCaption
buttontext buttonface ButtonText on ButtonFace
windowtext window WindowText on Window
highlighttext highlight HighlightText on Highlight
menutext menu MenuText on Menu
infotext infobackground InfoText on InfoBackground

This next list contains the colors that aren't paired with a matching contrasting color. These colors are not appropriate for a background or text color. They should instead be used to reflect the functionalities that their names imply:

Unmatched Colors:
buttonhighlight
buttonshadow
threedface
threedhighlight
threedlightshadow
threedshadow
threeddarkshadow
graytext
appworkspace
background
activeborder
inactiveborder
windowframe
scrollbar

If you're interested in using these system colors in your color scheme, I've modified the Dynamic HTML tool from my previous article into a new version that provides a color palette of the various system colors.

While all of this might seem like a lot to chew on, it is important to think about the content you are trying to provide to your users, and to make sure that they can actually read it. It's more than just selecting color combinations that look good. It's also important to consider the differences in vision that, to one degree or another, affect all of us.

For additional information about designing for users with color-deficient vision, check out the following links:

  • The Microsoft Accessibility Web site
    This site contains information from Microsoft about how to make your applications more accessible to people with disabilities of various sorts. It also provides information about accessibility features that Microsoft is adding to its operating systems and applications.
  • Safe Web Colours for Colour-Deficient Vision
    In this excellent article, Interaction Designer Christine Rigden of BT Laboratories shares her research in Web design, with color-blind users in mind.
  • VisiBone: Color Deficient Vision
    VisiBone, which makes an interesting collection of Web/color charts, has put together a Web page that provides further examples and information about designing for users with color-deficient vision.
  • Effective Color Contrast
    Aries Arditi, Ph.D, vice president for Vision Science at Lighthouse International, provides basic guidelines for making effective color choices that work for nearly everyone, and includes many example images.

Robert Hess hosts the MSDN Show.


  
Show:
© 2014 Microsoft