From Jennifer Kyrnin,
Your Guide to Web Design / HTML.
FREE Newsletter. Sign Up Now!

Can you read the image that is displayed on this page? Are the colors correct for what the words say? If you're color blind, chances are you can't tell. According to most statistics, color blindness is a problem for 8 to 12% of males of European origin and about half a percent of females. For these people, the words in my picture appear to be almost the same color.

Color blindness is most commonly a lack of distinction between the colors red and green. It is not generally a lack of seeing all colors (this is extremely rare). It is usually inherited.

Color Blindness and Web Design

Most Web designers are used to having a palette of millions of colors to choose from when designing a Web page. And just because you want your page to be accessible to color blind people doesn't mean that you have to limit that palette. All you have to do is think about the color combinations that you use.

If you're using colors to make distinctions, you should be aware that red and green can be hard for a color blind person to tell apart. Red and green are often used to indicate "stop" and "go" in US culture. However, if you use them in that way on your Web page, your purpose would be completely lost on a color blind person.

Here are some tips to make sure your pages are color blind friendly:

1. Don't use only color to indicate something specific on your page.
   For example, if you have a form with required fields, making the text red might not be a big enough distinction for a color blind person. Add another cue, such as an icon or other element to indicate that the field is required.
2. Desaturate your images to see if they still have impact.
   Desaturating the images removes all the color from the image. While this is not how most color blind people see the images, it will give you a quick and easy way to tell if the image is still useful. Maps are particularly difficult, as the red lines for "freeways" might look identical to the green lines for "dirt roads".
3. Try to avoid placing red and green together.
   Especially on items like navigation buttons, the text can actually blend into the background, making it very hard to read.
4. If you can, find a color blind friend or relative to look at your site.
   If you're not color blind it's often very difficult to tell what they might have trouble with. The challenge is that if they can't see something, they might not even know they aren't seeing it.
5. Choose your colors with awareness.
   It's perfectly fine to make a design choice that negatively impacts color blind people, but do it deliberately. And preferably, come up with an alternative for them as well.