Web Design for the Colour Blind

Website accessibility is one of the popular new buzzwords in modern web design. Essentially it allows people: with physical disabilities, who speak other languages or who have device and internet connection limitations, the ability to use your site. One of the easiest web accessibility considerations is for colour blind people.

When looking into designing your site for the colour-blind, it may at first seem like a lot of extra work to cater for a seemingly uncommon condition. However, consider that it has a 8% prevalence rate in males (with a drastically lower 0.5% in females) and that it takes just one colour blind decision-maker or influencer, to create a negative design (and by extension brand) interaction and potentially lose the client.

How Colour Blindness Works

Colour blindness test

Whereas a normal sighted person would see the number 74, a colour blind person might see 21, or nothing at all.

Colour blindness is often erroneously seen as someone being completely incapable of seeing colour, only black and white.

While monochromacy is an existing, albeit incredibly rare, condition; a far more common manifestation of colour blindness is for people to have difficulty seeing certain shades of red and green when combined with other colours or, less commonly, blue and yellow. Their vision is still largely colourful.

Picking Complimentary Colours

The problem often arises in picking colours that have a good design sensibility, that adhere to general colour theory, while still being visually obvious to those with colour blindness.

Some simple ones to stay away from (if you want the colours to come through): green and grey, green and brown, blue and purple, green and blue, light green and yellow, blue and grey, green and grey, green and black.

Often, you’ll find that simply adding a pattern or obvious colour gradient to one of the objects will make it visually distinct enough. However this is only appropriate in certain cases.

Contrast is King

High contrast is probably the easiest way to provide accessibility for both types of audiences. Contrast can be defined as the difference in the hue, saturation and/or brightness between two colours.

You can select any colour you like, even the same two colours. In fact, monochromatic sites are the easiest for colour blind people to read, as long as there is a large enough contrast between those two colours, and the background colour is bright enough. It’s also a good idea to make sure that the text colour is the darker one to ensure the best readability.

Testing Designs

As long as you’re keeping the above in mind, and have a modicum of design instinct, it can be a lot simpler to just design your site and then afterwards test its accessibility for colour blind people.

Some testing methods include:

  • Simulator testing – Websites like Colorblind Web Page Filter and Color Laboratory lets you simulate and tweak a webpage for various forms of colour blindness. And some even suggest different colour values to use, so that they’re more visible.
  • User Testing – Run two sets of tests, between a colour blind and a normal-sighted user to ensure they make their way through the site in a similar way.
  • Tweaking – Using the above simulation, try to make various adjustments to the site’s graphic elements to make sure they have the same impact. Things to test: background colour, image saturation, maps, responsive design elements (like buttons) and anchor links.

Designing for Details

Most design colour elements won’t bother a colour blind person, even if they can’t properly see it. It should also be noted that colour blind people still recognise classically important colours (example: Red for alert or danger), they just see them differently. So don’t focus on it to the extent that it’s condescending.

It becomes a threat when a vital design feature or part of the conversion funnel becomes obscured by a colour interaction. So it’s important to know what objects should be focused on primarily.

Things that absolutely must be visually obvious to any colour blind person include:

  • Anchor links
  • Responsive hover elements – for example: when a button or menu item that changes colour when your cursor rests on it
  • Background colours
  • Any text

While the statistics above show that colour-blindness is by no measure an uncommon problem, sticking to these tips also just makes good design sense. Ignoring the emotional effect of colour (temporarily, of course) can let you see what elements are drawing people’s attention, based on simple biological principles, and maximise the readability and positive interaction with your content.