Colorblindness and Usability print version - an article from Web Marketing Resources

Colorblindness and Usability a case study of Microsoft, Amazon and IBM By Todd Follansbee 1999
This first appeared (probably) in www.webword.com
click for a printer friendly version

Abstract: You might do a lot of usability testing on your web site but you still might lose up to 10% of your audience because of some simple mistakes with colors. Specifically, your web site may be designed in a way that doesn't work well for people with colorblindness. Generally the fix is quite simple: be sure to provide excellent contrast between your various web page elements.

Avoiding Problems with colorblindness

I have many years of web experience. I put up an e-commerce site before the term existed. In fact, I went online for the first time using the Dartmouth college mainframe via a Teletype machine in 1969. Add to this experience a multi-year focus on web usability and marketing and you'll understand that I am a user comfortable with the web. Nevertheless, when I found myself trying to place my first online order with Amazon.com a few years ago, even after filling out every field, I was at a standstill. I could see no way to complete my order. I sat staring at the screen, my frustration growing by the minute. As a co-worker walked by I happened to ask: "Am I missing something? What do I do to complete this order, I feel like an idiot!" The co-worker's response was justified, and at the root of this usability issue: "You are an idiot, click on the graphic where it says Click here to complete the order ." My response: "What graphic, I don't see a graphic." She trudged back, put her finger right on the screen and said: "It's right there, look." It was then we realized that my fairly typical colorblindness was preventing me from seeing this crucial piece of information on their website. It was unreadable to me.

I am one of the 10% of the male population who is colorblind. Approximately one million people visit Amazon.com each day so assuming that half of these visitors are male, than approximately 50,000 will be colorblind. Few of us can afford to frustrate 10 viewers let alone 50,000!

My marketing background piqued my curiosity to explore the problem further. Who else was losing business and why was no one talking about it? First, I explored Microsoft with a friend having normal vision. I discovered that I was unable to see several crucial components which halted my progress through the site. I noted the positions. Next, I went to another major site that follows a big blue graphic theme. Again I discovered entire sections of text and information that were unreadable.

How would these monoliths respond to my comments about the colors they were using? I detailed the problems, outlined the simple solutions and emailed their web support staff. Within days I was pleasantly shocked to see that both Microsoft and Amazon had made these fairly significant changes. This prompt response speaks volumes about their commitments to usability and the user experience. As for the "big blue" site, nothing changed and, the last time I went to the site I had to get an interpreter, I have avoided buying from them.

What Your Company Can Do to Help

Regardless of product quality, if I can't get support, and the company makes no effort to meet my needs, what choice do I have? Do not be deceived into thinking that because you have not heard from colorblind customers or users, you have no problems. Our experience is such that we reach a point in the site where we get stumped. Often we cannot discern the instructions but it is common that we do not even see them. If we complain it is unlikely to even touch on colorblindness because we can't see the problem! Unfortunately, you will probably wonder how anyone could be so stupid as to miss "obvious" instructional graphics.

Fortunately the solution is simple and can be summarized in one word, contrast.

You do not need to hire a team of colorblind usability experts (Nuts!). Simply remember that whenever you use a colored background for a page or a graphic, make sure the text message on it has strong contrast to the colored background. Black will always work (except maybe on dark blue or purple) and you can use contrasting shades as long as the difference is strong. Be careful using white text on a pale background as it can also disappear. The worst thing you can do though is for example, pale green text on a similar shade of green. The graphics folks may love it but you are throwing dollars out the window.

Studies show that 40% of users won't go back to a site that sucks, and if we can't make your site work, click we're gone. Is it worth worrying about? Amazon and Microsoft thought it was! I hope you do too or you can kiss my business goodbye .

This article is free for reprint however you choose as long as you request permission, provide a link to this site and acknowledge ownership. If you need more information or wish to discuss any aspect of this policy or the article please feel free to email me. todd@webmarketingresources.net - Thanks, Todd