Designing and testing websites for colour blind users
Most web designers and developers recognise the importance of using semantic markup; when screen readers are used by blind users, the content is still understandable. To do this, we often view our sites with CSS and JavaScript disabled, or use a screen reader emulator like Fangs.
However, by concentrating on blind users, we may be missing an even greater problem: colour blindness. While around 0.3% of the UK population is registered blind and a similar number partially blind, 3% of the UK population is colour blind. This problem is especially prevalent in men, with 1 in 20 suffering some kind of colour vision deficiency.
Types of colour blindness
Before we can design around the issues that our users may have, we first have to understand the different types of colour blindness. Let’s first take a look at a quick example, the Google logo. For users with no colour blindness, it looks like this:
The most common form of colour blindness is a deficiency called deuteranopia, which makes it difficult to distinguish between red and green. Here’s the Google logo again, this time viewed with deuteranopia simulated:
As you can see from the last two letters, red and green, two colours which are commonly used to designate very different things, are almost indistinguishable. Another form of red-green blindness is protanopia, which produces similar results:
A rarer form of colour blindness is tritanopia, which makes it difficult to distinguish between blue and green. Here’s the logo again, this time with simulated tritanopia:
As you can see, the ‘g’ and ‘l’ which are very distinct for people with no colour blindness are practically indistinguishable for someone with tritanopia.
These are by no means the only forms of colour blindness. In even rarer cases, people suffer from achromatopsia, or total colour blindness. With this, people can only see things in shades of black, grey and white.
Designing for colour blindness
One of the most important things to consider is how colour is used on your website. Colour is commonly used to show meaning, such as green for positive and red for negative. This is fine, but problems begin to appear when colour is the only way you’re showing this meaning.
Let’s take the BBC’s Celebdaq stock trading game as an example. It has lists of celebrities and how their prices have fluctuated. This is how it looks for people with no colour blindness:
Now contrast this with simulated deuteranopia:
Although the meaning given by colour is now gone, the arrows retain this information. If these symbols were removed, the list would be next to useless:
So one key rule when designing for colour blind users is don’t use colour alone to communicate information.
You also have to consider how these colour changes affect the contrast of text and images on your websites. What might be perfectly legible for you might be impossible to read for someone else. Noticing when this might be the case isn’t easy though, but fortunately there are some free tools available which make it easy.
Tools to test for colour blindness
One of the best tools on the web is Vischeck, which renders a simulated page for three of the most common conditions. Another excellent resource is the Colorblind Web Page Filter, which has a greater number of conditions and allows you to change between them while browsing a site. A newer and slightly different tool is Check My Colours, which lists all of the page elements and checks them for contrast issues. These aren’t the only tools, but they’re a great starting point.
To conclude
There are many colour blind users and probably far more than you might think. By using the free testing tools available and follow a few simple rules, you can dramatically improve the experience colour blind users have on your website.
Comments
Add a comment