UI Testing with Colour Blindness in Mind
on May 4, 2016
Making sure people can see what you’re trying to show them
Colour blindness, also known as colour vision deficiency or CVD is the inability or decreased ability to perceive certain colours which by some estimates, affects approximately 1 in 12 men and 1 in 200 women globally.
In Britain alone over 2.5 million people suffer from some form of CVD which can be caused by a multitude of different factors including a fault in the development of the retinal cones (thus from birth) and diseases such as diabetes.
The most common form of CVD is red/green colour blindness which means that someone with this vision deficiency is unable to fully see red and green light. It’s a common misconception that red/green colour blindness means that people only have trouble with those two colours, however any colour that is made up of those colours will also look different. Purple will look blue since the red is lost, similarly orange becomes more of a yellow.
Seeing through the eyes of others
It can be hard for those of us with full colour vision to imagine what it might be like to see things differently and you might wonder how we could possibly design for something we can’t see for ourselves. Luckily science has come far enough for us to simulate colour blindness so that we can both understand what other people see and also use tools to make sure our designs are accessible to everyone.
There are several tools that you can use when designing or checking previously created designs for accessibility. Adobe Illustrator actually has special viewing modes that allows you to view your work from the perspectives of people with different types of CVD. You can find this settings under the View > Colour Proofing.
If you don’t have illustrator there are some free tools available that allow you to upload and view images with different filters to simulate CVD. One of these simplest to use is the Coblis Colour Blindness Simulator which has 9 different CVD simulation filters for you to use.
Other tips for improving visual accessibility
Contrast is a very important factor in being able to visually differentiate things from one another. In general you should always be using contrast effectively to bring attention to important design elements but this is especially important when designing with accessibility in mind. Even if an individual is unable to tell the colour of two objects apart, they usually have no trouble distinguishing contrast.
Decluttering designs, clear shapes and text all help to make pages more readable and can actually require less work, although it can be hard for some designers to only design what is necessary and not add too much unnecessary flair.
A final tip for designers is to try to make sure that status and events aren’t solely indicated by colour. For example - you might decide to make your error messages red and success messages green, this is fine as long as you also make it clear in some other way what the message is so that the meaning isn’t lost on colour blind users. You can do this by prefacing the message with the literal status (Success, Warning, Error etc.) or include some iconography that make it more obvious such as a tick, cross or warning sign.
Colour Blindness Awareness
A website that contains a lot of information about the different types of colour deficiencies, how they are caused and a lot of helpful diagrams that show you the differences between them.
All About Vision
This website covers pretty much everything you could possibly want to know about the eyes and vision including a straightforward, easy to understand section on colour deficiency.
We Are Colour Blind
Created by someone who is colourblind (deuteranomally) and an interaction designer, wearecolorblind.com focuses on educating people who design or work with colour to make their work more accessible to people with colour blindness.
TutsPlus - Designing For and As a Colour Blind Person
A good blog post on TutsPlus that gives a few different tips on how to design with colour blindness in mind.