Essential Colour Checklists For Web Design

This article introduces the basics of cognitive psychology around colour and patterns -- what you need to know, and how it affects Web design in a nutshell.

By understanding the capabilities of the human eye, we can produce Website designs that are more user friendly. Not just for the partially sighted, blind or estimated 8-10% of men with red-green colour blindness, but for the majority of Internet users.

Here, we'll talk briefly about vision and colourblindness. Then, I'll present several checklists that will help you design sites that are suitable for the widest range of users possible.

Just What *Is* Normal?

'Normal' vision, whether you need glasses or not, is still subject to huge variances. Even the size of elements will affect an individual user's perception of colour. The colours and the intensity of shades you choose to use in your Website design will be discerned differently by every individual who visits your Website.

Change the ambient lighting levels, and what we see becomes even more inconsistent -- notice how your hair colour changes, for instance. I bought a pale blue-green suit because I loved the colour but only 1 other person (in my random sample of 20 colleagues in the same lighting conditions) agreed with my definition of the colour! The other 19 saw a grey suit.

My post-grad study of HCI reassured me that I just happen to have more blue sensitive cones (photosensitive cells which convert light energy into nerve impulses) in my retina -- you could say I view the world with 'blue-tinted spectacles'. Be aware that your perception of your Web design is not the same as everyone else's.

In addition to impaired vision, the key aspect to contemplate in achieving accessibility is that your design might be manipulated by assistive technology (software the physically disabled employ to enhance their experience of user interfaces, such as screen readers or magnifiers). How would your site look in only two colours, for example? Some Web users can only read a certain combination such as yellow text on a black background, which allows no room for greyscale.

Contrast Counts

The main ingredient for good legibility is strong contrast, and you should test this by manipulating screenshots of your design in a program like Adobe Photoshop. First, convert the image to greyscale -- this is a particularly useful approximation of difficulties colour blind users may experience in discerning one colour or shade from another. Then, make the screenshot monochrome to see how it might be viewed using the most extreme visual manipulation -- you can do this by increasing the contrast level to +100.

The example below shows such a test. Originally, we had 3 shades of orange in 3 blocks of colour to differentiate areas of the 'Plan route' bar. However, it was impossible for those with impaired sight to distinguish the selected shades, so a compromise was found that more users would see -- the darker shade of orange is reused to make up the second arrow, giving the impression of the graduation of 3 different shades but actually using 4 blocks of colour (assuming you have a similar level of vision to me that is -- in case you can't see what I describe, I have circled the reused darker shade on the colour version). Looking at this in greyscale, you'll see how difficult it is to tell the 2 darker shades apart.

The varying shades do not convey information that's essential to the user experience. They're there purely for visual enhancement. Therefore, it is acceptable that in monochrome they merge into a solid block -- when tested users could still work out what they had to do to plan a route.

Colour

Greyscale

Black and white (note that html text, rather than text within an image, converted to 2 colours would be much more legible than what is visible here)