Choosing colours

Before you even get into the discussions of the emotional connotations of different colours there is something you should take into account first: not everyone has perfect vision.

How a handful of recently published graphics look to most of us:
colour examples-02

How they look to someone who’s colour blind (deuteranopia), 1 in 20 people:
colour examples-03

In a discipline where colour carries meaning an awareness of this means you can design in such a way that more people will be able to get something from your work. This is the same reason that journalists use plain english, and developers write code that will work across all devices: to reach a wider audience.

Colour blindness
colour-wheelsThe top circle is how the colour spectrum looks to someone with full colour vision.

The bottom circle is how the colour spectrum looks to someone with deuteranopia, the most common form of colour blindness. About 1 in 20 people have this, predominantly men.

Largely a consequence of the default colour palettes we are presented with in the programmes we all use, the most frequent colour combination that fails this test is red-green.

See the examples above.

However there are many free and easy to use tools to help you avoid this issue:

Color Oracle Once you’ve installed it hit F5 or F6 to see what your screen looks like to someone who’s colour blind. For Window, Mac and Linux. I use this one.

Sim Daltonism It filters in real-time the area around the mouse pointer and displays the result — as seen by a colour blind person — in a floating palette. For Mac OS X. Thanks @nigelhawtin

ColorBrewer2.0 A tool to help you select colour palettes with the option to make them “colorblind safe” too – just check that box. Thanks @jburnmurdoch

If you use tools not included here that might help others please let me know or leave a comment below. Thank you.

There are a couple of other things you can do too to make sure any meaning being conveyed by colour is also being conveyed in other ways. Directly labelling differently coloured areas or lines rather than relying on a key that sits some distance away helps readers to distinguish them even if the colours look similar. Equally you can use different patterns for extra differentiation: dots, dashes, solid, hatched.

While I’m on this topic colour contrast is worth mentioning too. It’s not clear how many people this affects but there’s no harm in making your work as accessible to as many people as possible. And where this is most important is when you colour text, or reverse white text out of a coloured background. The tool I use is snook.ca’s Colour Contrast Check, looking to see that my colour combinations pass the ‘WCAG 2 AA Compliant’ test. (HT the time I spent designing to BBC accessibility standards).