A considerable proportion of people are colour-blind (about eight per cent of men and half a per cent of women.) Yet, while the evolution of new mobile technologies means that the way we view information changes day by day, few businesses bother to check whether their mobile apps, websites, products, services 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. Fortunately, ensuring that mobile materials are “colour-blind friendly” is easier than one might think. In this article, we’ll show you how to avoid alienating this audience and losing potential sales.

What is colour blindness?
Colour blindness is the reduced ability to distinguish between certain colours. It 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.

While a significant proportion of people are colour-blind, very few of them 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.

Why worry about it?
There are a number of reasons why so many businesses fail to check whether their mobile materials are colour-blind friendly. In our experience, most fail to do so because they are unaware of just how many people are affected. That is, most businesses simply don’t realise that a significant proportion of the population is colour-blind, so there is something of a knowledge gap. Having said that, we have also found that those businesses that are aware that more than 4 per cent of people are colour-blind, often do nothing about it, dismissing this figure as trivial.

The reverse is true, of course; because while this 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. But while some businesses continue to ignore this reality, this revenue is silently scooped-up by their competitors. It’s ironic, given the current economic climate, that some businesses feel that they can afford to ignore the needs of 4 per cent of the market.

There is also a general misconception that making mobile materials “colour-blind friendly” costs a small fortune and takes a great deal of time to implement. This, however, simply isn’t the case.

Are you discriminating?
Creating content that is inaccessible to the colour-blind may also constitute discrimination in some cases. It certainly contravenes the Web Content Accessibility Guidelines published by the World Wide Web Consortium – 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.

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.

These problems seem to be made worse when the coloured items are 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.

Getting it wrong
Mobile websites that have a ‘ticketing’ business model tend to be common culprits of using colour alone to convey information. These sites typically provide seating plans to help their customers choose the best available seats for the event that they are booking, using one colour for seats that with a god view, and another for seats with a restricted view. 

But running a typical seating plan through Colsim, our online colour blindness simulator, reveals that it is unusable for people with protanopia and deuteranopia. To them, the colours look almost identical .

Other common problems affecting the use of mobile websites and apps include the following:

Invisible links
Mobile websites regularly differentiate hyperlinks using colour alone – that is, without also underlining them. This means that those who cannot distinguish the chosen colour from that of the surrounding (non-hyperlinked) text will find the links impossible to pick out.

Indistinguishable game elements
Mobile games frequently use colour alone to convey critical gameplay-related information. For example, they regularly use colour to differentiate one player from the next (by way of coloured markers, pieces or avatars); to differentiate friends from enemies; and to differentiate different types of bonuses, rewards and power-ups. That’s fine if you can distinguish between the chosen colours; but if you can’t, you are onto a loser.

Seemingly identical statuses
Mobile chat apps often use colour alone to convey the status of the user’s contacts. They typically use a red circle (positioned next to a contact’s name) to denote that a contact is offline and a green circle to denote that a contact is online. Which is perfect if you can tell the difference between the chosen red and green. But if you can’t – because, say, you have one of the aforementioned types of red-green colour blindness – then you’re stuck.

Getting it 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 our seating plan example, we could easily eliminate the aforementioned problem by simply adding the letter R to the restricted-view seats. This would ensure that those who are unable to discern the difference in colour could still make the necessary distinction between the two types of seat. (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 non-restricted seats unchanged.) Similar solutions could be applied to our other example problems.

Running your mobile materials through a colour blindness simulator 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.

Paul Schwartfeger is MD, and Simon Griffin, director of design, at Etre