Are you making your site unusable for 13 million people?

A little over 13 million people in the United States—about 4.25% of the entire population—have some form of color blindness.

Some common mistakes on your website could be making it unusable for color blind individuals (and decrease your overall online revenue). It can also put you at legal risk under the Americans with Disabilities Act.

Let’s look at what they are and how to avoid them.

Different Types of Color Blindness

A lot of folks think that being color blind means you see the world in grayscale. That’s typically not the case.

Individuals with three of common forms of color blindness—deuteranopia, protanopia, and tritanopia—still see colors, but they see them as different hues than people without color blindness. Red and green are the colors most often affected (PDF). And, color blindness seems to affect men far more often than women.

The problem with red links

Red is a pretty common color in web design. Unfortunately, it also causes some problems for color blind individuals. Here’s a sentence with a red link…

Here’s what that same link looks like for someone with tritanopia…

As you can see, the hue is a bit off, but it’s still quite readable. Tritanopia, however, is a very rare form of color blindness.

Deuteranopia is far more common, affecting 5% of all males. Here’s what that link looks like for individuals with this form of color blindness…

The contrast between the link and text isn’t great. A visitor could probably still make out the link, but it’s far from ideal.

Protanopia affects 2.5% of all males. Here’s what the link looks like for individuals with this form of colorblindness…

Here, you can see that the link is barely distinguishable from the text. That’s a real problem.

It’s not just red

I’ve used the color red in the examples above because it’s quite common, but depending on the color of your text, some shades of blue, green, purple and more can all cause problems.

So what can you do about it?

How to make links more accessible for color blind people

There are a few things you can do to make links more accessible for individuals with color blindness.

One of the first things I do when running a mobile strategy audit is check out your website using Color Oracle, a free, cross-platform color blindness simulator that allows you to see what your site (or any other thing you make on a computer) looks like to individuals with the three forms of color blindness mentioned above.

If you want to use a color that has contrast issues (like red or green), use more than one indicator to let people know it’s a link. You might, for example, underline links in addition to making them a different color.

With a few simple modifications, you can make your website far more accessible for color blind individuals.

If you have any questions or need help, send me an email. I’d love to hear from you.