A student was asking me about use of colour in a design (that showed text on a background) today and one of the things I said to her was “Get it right in black and white”. Prof Lindsay MacDonald taught me this. The idea is to make sure there is contrast in lightness and that you are not relying on a contrast in hue for people to read the text. So, for example, if you must put red text on a green background – I don’t advise this particularly, but if you do – then make sure it is a dark green and a light red or a light green and a dark red.

In the above two images, one is easier to read than the other. In both cases the hue of the red and green are the same. But in one case there is a large lightness difference and in the other there is not. if you were to print these out in black and white, one would be more readable than the other. That is what, “Get it right in black and white means.” It’s sensible if for no other reason than it increases the chance that someone who is colour blind (most are red-green colour blind) would be able to read it. Of course, maybe red and green would be not great colours to use in the first place – but that is a longer story.

I have come across a really lovely interactive website that helps with this. It is called colorable. It allows you to enter two colours (in hex format) – or use slider bars to control hue, lightness and saturation – and then it gives you a WCAG contrast ratio and even a pass/fail decision about whether you meet the minimum guidelines. Please try it – it’s great fun.