This is a continuation of my Hall of Shame series, where I point out website “crimes” that many libraries are guilty of committing. If you missed my first post in this series, you can see it here: Hall of Shame series.

This time, I’m coming for those libraries (and other institutions) who don’t test their website to see if it works for people who are color blind.

Color blindness affects approximately 8% of all men, and 0.05% of women (National Eye Institute). This means out of the approximately 300 million people in the United States (doing the math myself) they may be as many as 12 million men and about 7.5 million women in the United States with some form of color blindness, which is a total around 19.5 million.

So, with all of these people who are color blind, what can we do to improve their experience on websites?

Rule One: Don’t use color as your only indicator of something.

Below is a study room reservation calendar, powered by springshare, on a well-respected academic library website. Unfortunately, I didn’t crop out a legend. There just isn’t one. If you scroll over the blue and red boxes, your cursor turns into a “no” symbol (a red circle with a slash through it), and the green spaces show a click cursor, and that serves as your way of knowing what the colors mean.

However, if you are totally color blind, the screen looks like this:

While you can still see some differences between the red and green, without a legend and higher contrast between the colors, it’s a little harder to guess as which mean available and which mean unavailable. The only way to tell, is to mouse over the cells.

Rule Two: Don’t forget to provide sufficient color contrast

This example is not from a library website, but from a café near where I live, that has overlaid text over a photo without thinking about how easy it is to read. It’s already hard to read for anyone without a visual impairment, because there isn’t sufficient contrast with the menu text and all parts of that photo.

 

But when you take color away, there’s even less of a contrast:

I’m not saying someone who is color blind can’t figure both of these websites out. What I am saying is that it is extra work we are placing on them to figure it out, when there are a few easy things we can do to prevent this from happening. Just do the extra work!

Summary of things to do on your website to avoid making it harder for your color blind users:

1. Use legends or keys if colors are going to be used to distinguish between things. In the example above, having a key (in addition to color contrast) will help a user easily read that schedule and know which cells mean the study room is available.
2. Make sure you have higher contrast between colors you place next to or on top of each other. You can use Web Axe’s Color Contrast Tools. I especially like to use the first one, the WebAIM contrast checker. One way to make sure there’s going to be good contrast is to make sure they’re at different saturation levels. A dark red and a light red will look pretty different, and are more likely to provide enough contrast because they have different levels of color saturation.
3. Lastly, Smashing magazine has a much longer list article on specific cases where color blindness and websites can clash, and how to avoid them.

References:

1. National Eye Institute. (2015, February 01). Facts About Color Blindness. Retrieved July 16, 2018, from https://nei.nih.gov/health/color_blindness/facts_about