Up to 10% of males have trouble navigating your site.

Scary, right? It may not be true if you’re using colors with color blindness usability in mind. But most designers ignore this huge segment of the population. And color blind people notice – and vote with their wallets – when a site uses poor color choices, especially with navigation.

From Usability Interface, Accommodating Color Blindness: There are two major types of color blindness. The most prevalent causes are confusion between red and green. This type affects approximately eight to ten percent of the male population. In another type, an additional one to two Percent of men suffer from a deficiency in perceiving blue/yellow differences. Less than one percent of women suffer from any form of color blindness.

Odds are you have a friend or relative who is color blind. You may not notice because in reality it should be named “color weak.” Only 0.005% of the population is truly color blind, meaning they see mono-chromatically. The rest have varying degrees of perception deficiency. The vast majority of the color weak have red-green deficiency. If you’re interested in knowing more about color blindness, go to WeAreColorBlind.com.

Life as a “Color Blind American”

Most people will be surprised to find out that I am color weak. Yet I design logos, graphics, web sites, etc. It sounds like it could be a problem, but I have adapted. On the positive side, my designs are automatically color blind accessible. Then, I use tools like Photoshop’s color picker, online color wheels for recommended color combinations, and the eyes of my son, wife, or anyone else nearby. It is common for me to say to someone, “can I borrow your eyes?” You’ll also notice my logos all look good in black and white, which should always be the case anyway since people still print with black and white laser printers.

Okay, I'm wearing white contacts in this photo.

Before I was diagnosed as a child, I had trouble in school. I colored in trees either all brown or all green – trunk and leaves. Same with grass. My kindergarten teacher used Color Phonics to teach reading, and they had decided I was learning-disabled until my mother decided to teach me how to read old-school style with books and practice. Even knowing I was color weak, my 7th grade art teacher failed me for not getting color wheel questions correct on a test. And I can’t tell a live lawn from a dead lawn.

A perfect example of a color blindness usability failure is traffic lights. Red-yellow-green is the worst combination possible. I use the position of the lights – the top is red, the middle is yellow, the bottom is green. Heading towards a flashing red or a flashing yellow, I don’t know which it is, so I don’t know whether to slow down or stop. Do you use the red-yellow-green paradigm for navigational instructions on your site?

Most of the time when I tell someone I’m color blind, they start testing me. “What color is this shirt,” “what color is that wall?” There’s usually a lot of laughter and wonder, then an uncomfortable moment when the person realizes they might be offending me. Don’t worry – it’s not like asking someone in a wheelchair, “can you climb these steps,” “can you jump over this box?” Color blindness is mostly just an inconvenience – unless we’re broadsided while running a red light we thought was yellow!

My online experience is similar. Many many sites use color as visual cues for navigation and presentation of information. I often will be stymied while browsing. If it’s bad enough, I leave the site completely, usually angry. I find the worst offenders to be Christmas sites – with all that red and green all over the place. It’s enough to make me a Grinch. Here are some examples:

Jeffrey Veen Blog – There’s links somewhere in the paragraphs. I didn’t know that until someone told me.

Gizmodo – This pie chart is a good example of an unusable graphic for the color blind.

Want to see a graphic that will knock out every color blind person? The person who did this should be slapped. Physically. Then fired. (See the anger I was talking about?)

Design Best Practices

The key to visibility for the color blind is color contrast. Colors on the opposite ends of the spectrum are the most contrasting. Black and white is the best example. A good way to start a design is to use gray scale. Then, add colors for interest, always keeping in mind contrast, especially regarding usability elements, like navigation and buttons.

Don’t use colors to differentiate links from non-links. Use the universally accepted underline.

Don’t use color as your sole visual cue in presenting information. Colors are okay, but additional cues, such as shapes or arrows, help. Here’s an excellent example of well done charts, where they connect the legend to the chart, so color vision is not required to understand the information.

Use bright, bold colors. Color weak people can see colors, they just have trouble differentiating between certain hues. Put orange and red together, or green text on red, and you’re courting trouble.

Tools

The best tool is to find some color blind friends to look at your designs and tell you what they think. Barring that, these sites can help you understand and simulate color blindness.

We Are Color Blind – many tools and examples.

Vischeck – see web pages and images similar to how color blind people see them. Includes a free Photoshop plugin!

Accessibility Color Wheel – analyzes the contrast of a color pair and shows how color-blind people see them.

Think you might be color blind?

Here are two online color blindness tests:

Ishihara Test for Color Blindness

Color Vision Test

If you suspect you may be color weak, see your optometrist for a definitive diagnoses. It really does help to know.

Your Turn

Let me know about your experiences with color, whether you’re color blind or not.