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.
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.
Category: General Thoughts












January 28th, 2008 at 10:56 am
That is so interesting, Rachel. Very neat that these tools and tests are around to accommodate this disorder.
February 6th, 2008 at 10:51 am
Wow this is great to keep in mind as a designer. Thanks for the tip!
February 7th, 2008 at 5:23 pm
This is really interesting to know. 1 in 12 people who visit your site are colorblind, seems like a very high statistic. One that most people are completely unaware of. It’s great that you are helping to spread the word.
February 25th, 2008 at 12:07 pm
This is a great thing for designers and reviewers to keep in mind. I had seen the 1 in 12 stat before but it never really hit me until I read your article that that is like taking an 8% potential revenue hit right off the bat if your website can’t be used effectively by the color blind. Good stuff!
June 21st, 2008 at 7:23 pm
[…] Tramadol Fioricet Soma Cialis Carisoprodol levitra Ultram Ambien Viagra Xanax Phentermine Valium …http://www.leveltendesign.com/blog/general/by-rachel/611/Fired over prank call shock levlen. &187 Government mississippi …We don&8217t live in a color […]