Paul Schwartfeger and Simon Griffin from design firm Etre explain how you could be losing out by not optimising your website for the colour-blind.
A significant proportion of people are colour-blind (about eight per cent of men and half a per cent of women.) Yet few businesses bother to check whether their websites, mobile apps and other visual materials are accessible to those who are unable to distinguish between certain colours. As a result, these businesses unwittingly frustrate this audience and in many cases prevent them from becoming customers altogether.
Colour-blindness, the reduced ability to distinguish between certain colours, is usually inherited, but can also occur as a result of physical or chemical damage to the eye, nerve or brain. The most common form of colour blindness is red-green colour blindness (which includes the conditions protanopia, deuteranopia, protanomaly and deuteranomaly). Blue-yellow colour blindness (which includes the conditions tritanopia and tritanomaly) is another, less common, form of colour blindness. While a significant proportion of people are colour-blind, very few people cannot see any colours at all.
Only a tiny percentage of people have monochromatic vision. The term ‘colour-blindness’ is therefore something of a misnomer, but the condition is not to be ignored. While many businesses are dismissive of this issue, it can have a significant impact on revenue and customer perception; and may also bring about legal repercussions. Thankfully, ensuring that your website is colour-blind friendly is easier than you might think so why alienate people you’re trying to attract?
1 Know what you’re dealing with
A normal human retina contains two kinds of photoreceptive cells: rods (which are active in low light) and cones (which are active in daylight). Monochromacy, also known as ‘total colour -blindness’, is a lack of ability to distinguish colours. It is caused by the absence or defectiveness of two or all three, of the different types of cones. Those with this condition see the world in shades of a single colour (red, green, blue or grey). It is extremely rare, however.
Dichromacy is a moderately severe form of colour vision deficiency, caused by the absence or non-functioning of one of the three types of cones. Dichromats with protanopia have absent or non-functioning L cones. As a result, they see reds, oranges and yellows as shifted towards green, and as being less bright than people with normal colour vision. They also find violet, lavender and purple to be indistinguishable from various shades of blue because their reddish components appear so dim.
Dichromats with deuteranopia have absent or non-functioning M cones. As a result, they see oranges, yellows and greens as shifted towards red, making them hard to distinguish. Violet, lavender, purple and blue would also appear pretty similar too.
Dichromats with tritanopia have absent or non-functioning S cones. As a result, they have difficulty distinguishing between greens, cyans and blues; and yellows and violets. They can also confuse pinks, oranges and browns.
Anomalous trichromacy is a mild form of colour vision deficiency, occurring when one of the three types of cones is altered in its spectral sensitivity. Anomalous trichromats with protanomaly have defective L cones. They therefore experience similar, but less severe, problems to those with protanopia.
Anomalous trichromats with deuteranomaly (the most common form of colour blindness, affecting approximately 5% of men and 0.4% of women) have defective M cones. They therefore experience similar, but less severe, problems to those with deuteranopia.
Anomalous trichromats with tritanomaly have defective S cones. They therefore experience similar, but less severe problems, to those with tritanopia.
2 Get to grips with the stats
Many businesses fail to check whether their websites are colour-blind friendly because they are unaware of the stats. That is, most simply don’t realise that around 4% of the population is colour-blind, so there is an education ‘gap’. Having said that, those businesses that are aware of this figure often do nothing about it, dismissing the matter as trivial. But while the percentage may sound small, unless your business targets a truly microscopic audience, it actually represents a huge number of people and thus, a massive amount of potential revenue.
3 Are you discriminating?
Creating content that is inaccessible to the colour-blind may actually constitute discrimination. It certainly contravenes the Web Content Accessibility Guidelines published by the World Wide Web Consortium (W3C; http://www.w3.org/) - that is, the guidance that underpins the legislation on Web accessibility in many countries. So, the harsh reality is, if you don’t make your content accessible to the colour-blind, you may risk a lawsuit.
4 Are you creating problems for the colour-blind?
Businesses cause problems for colour-blind people when they use colour alone to convey information. This mistake is most frequently made in relation to the design of maps, diagrams, graphs, charts and other types of infographic.
5 Size also matters
Problems seem to be made worse on websites when the coloured items used are particularly small. That is, some colour-blind people report that they can only distinguish certain colours if they have a sufficient ‘mass’ (for example, they might perceive a thick coloured line as being red, but a thin version of the same line as being black). This is a possibility rather than a confirmed trait, but nonetheless it’s worth bearing in mind.
6 A good example of getting it wrong
Websites that have a ‘ticketing’ business model tend to be common culprits of using colour alone to convey information. These websites typically provide seating plans to help their customers choose the best available seats for the event that they are booking. But if you are colour-blind you may not be able to distinguish between the colours used to differentiate seats with an unrestricted view from those with a restricted view for instance.
7 Putting things right
Businesses can eliminate these types of problems by ensuring that any information that they convey though the use of colour is also conveyed via another means. Applying this safety net means that those who cannot perceive the colour can still perceive the information. Returning to the seating plan example, the aforementioned problem could easily be eliminated by simply adding the letter ‘R’ to the restricted-view seats. An alternative solution would be to change the shape of the restricted seats (from rectangles to, say, circles) or to apply a pattern to the restricted seats (such as a stripy overlay) while leaving the presentation of the unrestricted-view seats unchanged.
8 Run a colour-blind check
To find out whether your website is colour-blind friendlyrun the pages through a colour blindness simulator such as www.colsim.com - it will tell you whether they are colour-blind friendly or not. Where they aren’t, you should be able to fix them quickly and easily using one of the simple techniques described above.
Etre is a design firm that takes a people-centred approach to helping companies innovate and grow. It identifies new opportunities for customers, employees, shareholders and others by uncovering their latent needs, behaviours and desires; generates, develops and tests ideas that seek to exploit these opportunities; and then implements those proven to deliver real business results. The website is: www.etre.com