- A weblog by InetSolution
Help Your Color Blind E-commerce Shoppers Choose the Right Color
By Jason Sherrill
Posted on Jul 11, 2008
Today I was ordering new pages for my Franklin Planner (yeah, I still use paper). Overall, FranklinCovey.com is easy to use and thoughtfully designed with a smooth checkout process. I did encounter one small annoyance that many designers and programmers probably don't think about when creating e-commerce sites where product color is one of the selection criteria
I'm one of those lucky 7% of men with color blindness. I have most difficulty distinguishing between red & green. For example, some dark shades of red look black, while some greens look gray. Grass looks green and tart cherries look red, so I am able to distinguish some shades of those colors.
Many e-commerce sites, especially clothing sites, will display a color chart for certain products. Often these color charts include either a text label beneath the color swatch, or they'll include alt text that displays the color name when I mouse over the swatch. When color charts with text labels do appear on a site, I actually find it easier to buy clothing online than in a store since usually in the store, the color is not printed anywhere on the product. I own several pairs of green socks that I thought were brown when I purchased them (my wife helpfully removes these from my sock collection since I don't often need to wear green socks).
On FranklinCovey.com, I had to choose a color for the storage the case I was ordering. They presented two choices, both of which looked black to me. Since I didn't think they'd make me choose between black & black, I concluded that one of the swatches must be dark red or dark brown.
The two colors look identical to me
Unfortunately for me, their web developers did not include alt text with the image swatches. They also made these swatches small, which makes it more difficult to distinguish the colors. I had to grab a screen shot and Jing it to Don so he could tell me which of the colors was black.
Amazon.com is one site that almost always gets it right. When looking for a new single-cup coffee maker, Amazon's designers provided both a mouse over action to display the color name, as well as alt text with the color name.
Amazon makes it easy to select the right color.
When designing your website, especially if color is an important decision criteria for your male customers, then be sure to spend the extra few minutes include alt text with your color swatches. You'll create goodwill with your color blind customers and likely will get the sale that you may have lost to a competitor.
P.S. Here is a slick site that will shows you how color blind people see various colors.
