Designing for the Color Blind

Designing for the Color Blind

At LevelTen Design, one of the things we focus on when developing websites is usability. Usability on websites encompasses everything from creating usable navigation to making sure the website is accessible for the blind. Although we focus on several aspects of usability, one aspect of usability that has been ignored has been color blindness. The reality is that 8% of men and 0.5% of women have some form of color blindness. WebTechniques concludes that 1 in 12 people coming to a website are likely to be color blind. The most common form of color blindness is a red-green disorder in which red and green cannot be differentiated from one another. About.com gives several ways to succumb to this disorder in web design without sacrificing the color palette or design:

  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. 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.
There are several resources online to help determine how color blinded people see websites. The color evaluation test at newmanservices.com allows you to copy and paste html text to see what the content looks like to someone with color blind disorder. There is also another tool called Vischeck where you can upload images to see how they are viewed by color blinded people. Color blindness is a widespread and important item to focus on when designing for websites. I hope that LevelTen and the rest of the website community continue to learn about color blindness and the steps to make the web usable for everyone.