The online equal opportunity programme which my company has developed uses red/green traffic light symbols to tell the user which parts are completed. This is causing problems for colour blind users and we are looking for other colours/symbols.
Any advice would be gratefully received. Many thanks Vanessa
vanessa martin
9 Responses
Keep the solution simple.
Hi Vanessa,
It’s an interesting point to raise – in fact a project that we are currently undertaking with the Department for Transport, promoting road safety, threw up the same issue. The fact is that the answer to this could get very complex so my first bit of advice is to keep the solution simple!
There’s volumes to read on the subject but with simplicity in mind I reckon just a couple of facts will be useful: first, research suggests that colour deficiencies are more common in men than women, with around 8% of males being affected; second, most often problems revolve around red or green – interesting then that these are the colour used for traffic lights!
The fact is that the complexity of the subject makes it difficult to make definite suggestions as to which colour combinations to use. You simply won’t be able to accommodate all the colour deficiencies that are out there! (go to http://more.btexact.com/people/rigdence/colours/Background.htm) and you’ll see what I mean. OK, it makes complete sense to limit the impact but unless you’re prepared to change the symbol from a traffic light, you’re stuck with red and green.
If the symbols are simply being used to indicate “stop” or “go” then my suggestion would be to make a simple design development to the symbols: If there’s room, add the words “stop” and “go” to the graphics – either overlaid on the symbols themselves or alongside. If space is at a premium how about simple light ray lines that indicates which colour is lit – perhaps flashing to make it really clear.
However, you mention that the symbols are being used to indicate which parts are completed. With this in mind I’m not convinced that traffic lights are the best graphic device and, if it’s not too painful and costly, you should change them.
Any replacements should rely on shape and tint rather than colour. There are some obvious solutions – e.g. a checkbox with or without a tick to indicate the status – but without seeing the content and context they could be off target.
Whatever you do I’d encourage you to keep it simple. Plus of course you should use this a brand-building exercise – being seen to react swiftly to customer needs is sure to help build the relationship with them!
try shape not colour
To indicate progress status such as not started,complete and started (not complete) I often do not design with colour as the main focus – I find a graphical icon works better.
For example, by each ‘section’ you could have a simple shape (such as a square), in outline, to indicate it has not been started. Upon completion you ‘fill’ the shape. If the section has been started you part fill the shape.
Hope this helps.
Shape and Colour
When faced with a similar issue, we stuck with the traffic light colour sequence, but included a darkened shape within the coloured circle – triangle, square, diamond. This meant that both users with and without colour blindness could follow their progress. Those who were colour blind picked up on the shape the first time they used the course and used this to confirm the colour being used.
Shape and Colour
I work for a Training Company and we were faced with an identical problem.
We were using traffic light symbols to determine the status of a phase in a tracker document we had designed for a programme we were running for a client, when we discovered one of the participants had red/green colour blindness. We decided to keep the original red, yellow and green circles representing ‘not in place’, ‘in progress’ and ‘complete’ respectively. However, in order for the participant to distinguish between the red and green circles, we placed a black cross (X)inside the red circle, and a white star symbol inside the green circle. So when they saw a cross in the middle of a circle they would know that stage of the phase hadn’t started yet, and when they saw a star in the middle, they would know that stage of the phase had been completed. If they saw a blank circle, they would know that this particular stage was still in progress.
The feedback from our client with regard to our solution was extemely favourable.
Design in black and white
One of the best tips I ever heard was to design all screens in black and white first and only then add colour touches.
Relying on colour for meaning is a bad idea — even for those with perfect vision. The reason that real traffic lights are usable by the colour-blind is that they rely on position, not colour, at least during daylight hours.
Smiles or lines…
Two ideas I have used in the past – sad / smiley faces work in balck and white and are simple as they are part of most fonts;
And if you are using traffic lights, put little lines around whichever light is shining at the time. As already noted, colour blind people can use traffic lights as the positions are known.
Progress Indicator
We do a lot of accessibility materials for our clients, and I would recommend that traffic lights are perhaps not the best solution. We have in the past used a circle icon which is unshaded, half shaded or completely shaded to identify the users progression (not started, started but not complete, completed. As long as the colours used for the icon and its shading have high contrast then it will work. Don’t forget to include alt text tabs to give screen reader users information.
Have a look…
After reading this I created the following for you to see.
http://www.trainer1.com/map
Ensure you click on item3 in any section before returning to the map
Colour here makes no difference, it is a mark in a circle that shows completion.
This took two hours of development to create, if you would like to know more please get in touch.
Neil Lasher
Does red mean “completed – do not go here” or “stop and do this”
I’m curious about how you explain the meaning of your icons, or if indeed you needed to. We have used red, green, and yellow without any problems or complaints across tens of thousands of learners around the world – we switched from a black&white icon-based system several years ago that was simply not intuitive across all cultures. As others have said, you can make the colours appear different to the colour-blind by using different shapes.
As an aside, it had not occurred to me that red/green can have ambiguous meanings till I saw a demo of a software package that lets you record a talking-head video with a PowerPoint presentation. They used VCR-like control buttons. The “record” button had a big red circle on it. I said to the vendor that surely green would be a better color for a “go” button, and he said that all VCRs use red for “record” (which of course they do).
Someone who uses a VCR often would have found red intuitively right for “go”; to me it meant “stop”. Similarly, the shape of the red icon, a circle, has connotations of stop signs — to me, a forward arrow would have indicated more correctly the action that the button would trigger.
Godfrey Parkin
MindRise
gparkin@mindrise.com