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:
- 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.
- 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".
- 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.