Jose Gallego, UX/Front Designer a tiempo parcial, Arquero y Esclavo perruno a tiempo completo

Seeing the web clearer, How to improve UX and Accessibility for colour-blind users


by JoseGallego



Article originally writed for on Medium, you can also read it here:

Image for post

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.

Image for post

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.

Image for post

Actually, it turns out he was wrong and he died without knowing the real cause of his colour perception 🙁





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.

Image for post

We (humans) start to perceive wavelengths from 400–450nm which represents the Violet flowerly colour and finishes around 610–760nm which is the red and delicious Cranberry colour.

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)

Image for post

This graph is a representation, rather than an accurate view, of each syndrome, each one could in reality have plenty of minor variations



Let’s do the thing!

There are two simple ways to optimize your eCommerce, blog or whatever site you use for colour-blind users:

  1. Contrast: Test your interface and your design for contrast. People with colour-blindness cannot perceive certain colours, but they can perceive contrasts.
  2. 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).

Image for post

It’ll be hard for colour-blind people to know what colour this T-shirt is without the Colour Description.






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.

Image for post

Underlined links are much easier to see by someone with achromatopsia.

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:

Image for post

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

Image for post

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.

Image for post

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.

Image for post

Using patterns and, where possible, placing text within each segment makes graphs much easier to understand. If the text doesn’t fit — as is often the case with a small pie chart segment — using a key can suffice.

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.


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.

  1. WebAim’s colour contrast checkerProvide two colours to see if they pass accessibility guidelines.
  2. I Want To See Like The Colour Blind
    Apply colour-blindness filters to your web page right within Chrome.
  3. 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!

Image for post

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 🙂

Image for post

Related Posts

UX Design Tips for an eCommerce Experience filled with Empathy

UX Design Tips for an eCommerce Experience filled with Empathy

Article originally writed for on Medium, you can also read it here: eCommerce sites have taken the high street and more traditional shopping by storm...

ECOSIA, Plantando árboles mientras navegas por la red

ECOSIA, Plantando árboles mientras navegas por la red

ECOSIA es el buscador que destina una gran parte de sus ganancias por anuncios/Ads  en plantar árboles. Según recogen en su web, llevan más de 3 millones (camino de 4) de árboles plantados en todo el mundo, sobre todo en la zona de Burkina Faso, África. También...

Tutorial SASS Framework.

Tutorial SASS Framework.

Hoy os traigo el contenido del taller de SASS que impartí hace unas semanas conjuntamente con mi compañero Pixeltomas. Sass (acrónimo de Syntactically Awesome StyleSheets) es una extensión de CSS escrita en RUBY que añade características muy potentes y elegantes a...

Get In Touch

Get In Touch