Catering to your colorblind users

Picture of Fred Stevens-Smith
Fred Stevens-Smith, Friday July 11, 2014

Every once in a while, a feature request comes in that may not matter to a lot of our customers, and may only be used by a few people ever, but that is really important. Colorblind mode is one such feature.

I was hanging out with Vince (a product manager at one of our awesome customers, Betterworks) and going through his feedback on Rainforest. We got through the long long list of his desires and dislikes (thanks Vince!). He finally paused, and said "oh, one more thing - I'm partially colorblind and I can't tell the difference between passes and fails in Rainforest".

And so began a journey of discovery.

The problem

Vince, like roughly 8% of men, is colorblind. The most common type of colorblindness is the group known as red-green deficiencies. People with this condition have trouble distinguishing between red and green, especially between similar shades. Let's take a look at our dashboard - the screen that Vince had problems with.

Oops. The only way to tell if something has passed or failed in Rainforest is through distinguishing between red and green. By removing the colors, we can get an even better sense of how this might look to someone like Vince:

So it's pretty clear that this design really doesn't work for Vince, and for a couple of reasons:

  1. Colors are the only way of conveying important information. There is no secondary signifier, meaning that if you can't tell the colors apart this interface is useless. (Read more on designing for colorblind users.)
  2. It's very hard to actually distinguish between the two colors, since they are such similar shades.

Solution 1: show important information using symbols as well as color

This was the easiest 'fix'. Previously, we had repeated the browser icon on each 'result', with the color as the only signifier of pass or fail (yes, this was a crappy design). Since the browser is obvious because it's the key for the column, we could replace this repeated information with something useful - a symbol denoting pass or failure:

This is really just a principle of good design - don't repeat yourself, and don't display information unless it's helping your customer do the job they are trying to do. However, this is still only visible after you have expanded a set of results. So we also need to update the colors on the page to make it easier for Vince to tell them apart.

Solution 2: update the important colors to be easier to tell apart

People with red-green colorblindness have a hard time differentiating between red and green. So, the second step to making Rainforest's dashboard usable for Vince is to pick two colors that are super easy to tell apart:

And using our simple way of checking contrast when the color information isn't clear, this seems to be an improvement:

And sure enough, Vince was happy!

Boom!!! goes the dynamite. I can unequivocally identify pass/fail. Before it required a lot of squinting.

Nice! Love you Vince.

How to do this for your customers

The way we implemented this was through applying a .colorblind class to the body for all users with a certain flag enabled, and then to create a conditional stylesheet to override certain important colors. The code for both is trivial, but here's the stylesheet for your perusal (SCSS).

We added an accessibility area to the user settings section to toggle this simply:

But that got me to thinking - surely there's a better, more universal way of handling this? The elegance of Cascading Style Sheets make it trivial to override styles in your app based on specific classes. So why should every app developer reinvent the wheel and write custom code to tell the browser that this user is colorblind. Isn't that the browser's job? Wouldn't it make more sense for the user to have some sort of way to inform every website they visit about their accesibility requirements?

You can probably see where this is going.

Introducing: an accessibility extension

I whipped together a simple extension that tells any website you visit that you are colorblind, by adding a .colorblind class to the body of the page.

Check it out on the Chrome webstore or on GitHub.

This seems like the easiest way to improve accessibility across the web, by keeping it ultra simple for developers to target colorblind users and removing the need to create the infrastructure and code to store whether a particular user is colorblind or not. Future versions will add more granular information (for example, the type of colorblindness), as well as displaying to the user whether the site they are on has styles specifically targeting their accessibility requirements.

If you're interested or think that you have a better idea for helping solve this issue, please create issues on the project and submit your improvements as pull requests.

Mostly just share it with your colorblind friends.