Seeing the web clearer
How to improve UX and Accessibility for colour-blind users
Colour-Blindness, also known as Daltonism or Colour Vision Deficiency (CVD), is a syndrome that affects around 1 in 12 men and 1 in 200 women worldwide, that’s around 318 million men and 18 million women, roughly 8% of the world’s population, the equivalent of the whole population of the United States of America!
As of June 2018, 55.1% of the world’s population has internet access (International Telecommunications Union), that means there’s about 172 Million active colour-blind users on the Web.
What if I also told you that each one of those people wanted to buy something on your eCommerce site but that it also depended on their experience?
This raw data clearly demonstrates that if you want to reach the widest possible audience it’s important to think about this issue.
A bit of History
John Dalton postulated that his shortage in colour perception was caused by the discoloration of the liquid medium of the eyeball called aqueous humour. According to his research he believed that the aqueous humour was bluish and therefore filtered out all the colours. His observations and writings formed the expression Daltonism as a common wording for colour-blindness.
Why Colour-Blindness happens:
As Sound, Radio, Sonar and many other transmissions of data, our perception of colour is caused by wavelengths that cover different ranges; Those wave-lengths are detected by a specific kinds of cells we have in our retinas called Cones. We also have another kind of cell called Rods whose function is to detect the intensity of light.
We have three different types of cone cells; one for Red (known as protan), one for Green (deutran) and one Blue (tritan). All these three together create what we know as the (RGB) colour system; So, the main two reasons of a Colour Vision Deficiency are therefore:
- One or some types of your cone cells detect only one part of the spectre that it should normally detect (anomaly)
- One or some type of your cone cells can’t detect any signal at all or even you don’t have that kind of cell (anopia)
Let’s do the thing!
There are two simple ways to optimize your eCommerce, blog or whatever site you use for colour-blind users:
- Contrast: Test your interface and your design for contrast. People with colour-blindness cannot perceive certain colours, but they can perceive contrasts.
- Description: Choosing the right colour out of a list on an eCommerce site can be treacherous territory for someone with colour-blindness. Make sure to properly label colour choices with either an “alt text” scroll over option or with copy on the page.
Knowing this basic rule, here’s also nine improvements, tips & tricks to create a better accessibility and an enhanced user experience for people with any kind of Colour Vision Deficiency (CVD).
1. Text Readability
To ensure text is readable it should pass accessibility guidelines based on the combination of text color, background-color and font-size as follows:
“WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text (14 point and bold or larger, or 18 point or larger).” — WebAim colour contrast checker
2. Colour Filters, Pickers and Swatches
Talking about colours without descriptive text makes it impossible for colour-blind people to differentiate between many of the options available. We should therefore take care about this issue and remember that the colour you see is just a representation of what your photopigments capture; it should also therefore have a textual hint to help CVD users use your colour filters.
The screenshot below shows the colour filter on Amazon as seen by someone with and without protanopia (red–green colour-blindness).
3. Link Recognition
The links of a webpage should be detectable without relying on its colour. The easiest way to define a link is by giving it an underlined effect, to complement the link with an icon, or highlight it with a background. Alternatively, the user may keep moving the cursor around the screen hovering everywhere looking for a cursor change to a pointer, quite stressful right? Imagine somebody navigating with a touch device, trying to touch everywhere hoping to find a link to buy on your site, you can definitely say goodbye to that sale and user.
4. Colour Combinations to Avoid
Since colour-blindness affects people in different ways, it’s difficult to determine which colours are ‘safe’ to use in web design. Here’s a few colour combinations to avoid because they’re a potential nightmare to colour-blind users:
5. Alert Messaging
Most sites use Red and Green colours to enhance Error or Success messages respectively.
It’s true that colour-blind people naturally associate different colours with different messages, however, it’s a good technique to use a quick hint for the action with associated text such as ‘success / error’ or even better an icon tick / cross” that is globally recognized
6. Required Fields on Forms
To fill required forms with colour can be a problem as some colour-blind people may not be able to see the differences between red and black text fields.
Instead, you should consider:
· Marking required fields with an asterisk or icon.
· Even better, marking required fields with “required.”
· Where possible, removing optional fields altogether.
7. Graphs
We use colour in graphs to fill different segments and differentiate each from the other, but it could be very difficult for some people with a CVD to understand this.
We can make use of patterns, textures and highlighted text to help people differentiate elements.
The next image shows a graph seen with normal vision and with protanopia.
8. Zoom
Enabling zoom on a browser is a key and useful tool for people with some kind of vision deficiency and it’s especially helpful when we’re navigating on mobile devices.
Developers can disable it by the Viewport Meta Tag, which is problematic. For example, text size may be too small to read in relation to the colour contrast but zooming in effectively increases the font size, making it easier to read.
So please don’t disable zoom on your website :)
9. Relative Font Size
Similarly to the previous point, browsers can offer the ability to increase text size (instead of zooming the entire page as a whole), in order to improve readability.
However, some browsers disable this functionality when the font-size is specified in absolute units such as pixels. Using a relative font size unit, such as ems, ensures that all browsers afford this capability.
Tooling
There are an army of tools available to help you design for colour-blind people:
Check My Colours
If you have an existing website, you can just enter a URL and receive feedback of what needs to be improved.
- WebAim’s colour contrast checkerProvide two colours to see if they pass accessibility guidelines.
- I Want To See Like The Colour Blind
Apply colour-blindness filters to your web page right within Chrome. - Colour Oracle
A colour-blindness simulator for Windows, Mac and Linux, showing you what people with common colour vision impairments will see.
If you use photoshop and other design tools, some of them will have the option to change the colour schema into a different CVD one, even if your operating system has this setting in its accessibility panel!
Summary and Personal opinion
All these issues form part of creating the User Experience, and while some may affect more users and others only a small number they nevertheless shouldn’t be ignored.
When we talk about UX we are clearly talking about creating a pleasant and enjoyable user experience, one that makes the user happier and that they will remember as part of the product.
Generate the emotion and you will reach the person
We should all be aware of accessibility issues, and of course this doesn’t just belong to the web world. It should be a way of thinking, we need to put ourselves in the shoes, or in this case eyes, of others and have the responsibility to contribute to make their lives a bit easier, so what’s stopping us, let’s just do it :)
