Colorblind Accessibility on the Web – Fail and Success Cases

It’s Colorblind Awareness Day today! To celebrate, we raise awareness by giving you some practical examples of how design can hurt or help users with color vision deficiencies.

Colored pencils, all in grayscale

Diagrams and infographics

Diagrams and infographics are common offenders when it comes to creating accessibility barriers for people who can’t tell certain colors apart.

Green and red are the most common colors that are difficult for people to tell apart, which makes the diagram below extra problematic.

Table with red and green circles indicating yes or no.

This is what it would look like with deuteranopia, a color defiency that about 6% of the male population has.

Pie charts are usually really inaccessible.

If you really want to use a pie chart, put your labels in the chart.

Piechart with labels on the chart.

Or just use a bar chart instead because piecharts kind of suck.

Here’s a great article on how to make your charts more accessible with color blind friendly palettes.

Color pickers

Color pickers without labels will create a barrier for people with color blindness.

Color pickers without labels on clothing site.

Instead, label the colors. This will help all users, since it can be hard to see the difference between certain colors like black, tortoise and brown. The great example below is from warbyparker.com.

Labels by the names of colors on a sunglass site.

Apple also does a good job with this. Instead of showing a color palette they show the actual product in the different colors, with a label below.

Shopping for an iPhone. Color labels below each phone.

Toggles

Here is what one person on Twitter answered when asked what causes accessibility problems for people with disabilities:

This is what iPhone’s toggles look like if you remove colors. Which one is on and which one is off?

A toggle in black and white. One turned on and one turned off. Can't tell which one is which.

A simple solution is to just use check boxes instead:

Checkboxes in settings of Android phone.

Error messages

A red frame around error messages is not good enough, like illustrated by this image from the great article Designing eCommerce for colourblind users (uxplanet.org):

Error messages with only a red border around it.

You need to make the error stand out more clearly by adding an error message:

Error messages below form fields.

Don’t just use color to differentiate links from other text. If you remove the color it’s really difficult to understand that the heading “Modules” is clickable in the example below.

Links that are almost impossible to spot in greyscale.

You can use color, but in combination with something structural, like an underline, a link icon or a button design.

Here are a few examples of links that work well even if you have a color vision deficiency.

Links with underlines, arrow icons or button looks.

Contrasts

Make sure that you have sufficient contrasts between your colors. Avoid writing text on top of images, like in the example below from the article Improving The Color Accessibility For Color-Blind Users (smashingmagazine.com):

Text overlay on a very light background. Text is readable.

Make the background darker to improve the contrasts:

Text overlay on a very dark background. Text is readable.

Measure your contrasts and make sure they are at least 4.5:1. Here’s a list of our favorite free color contrast checkers.

Below is an image of a big contrast fail in real life:

Sign "You are not alone" but the word "not" is low contrast.

The overall accessibility guideline

The guideline for creating accessible content for people with color vision deficiencies is pretty straight forward:

Color is not used as the only visual means of conveying information (Level A)
Web Content Accessibility Guidelines 2.0

So it’s fine to use colors to convey information, as long as it’s also conveyed in some other way.

A great way to check it is by viewing your design in greyscale before each release. You can use the free tool Funkify to do it right in your browser.

Keep updated on color blindness

Here are tips of two awesome Twitter accounts to follow that raise awareness on color blindness:

@colourblindorg
@WeTheColorBlind

And while you’re following great accounts on Twitter, follow me as well: @hampelusken!

Let’s end with this Tweet from @colourblindorg showing that color problems limit people outside of the web as well.

Get notified when we write new stuff

About once a month we write an article about accessibility or usability, that's just as awesome as this one! #HumbleBrag

Simply drop your email below.

We work world wide, if you need help send us an email!
hello@axesslab.com