Colour blindness in eCommerce

When within the world of eCommerce, it is important to make sure all corners are covered when catering to customers. However, in retail as many problems are resolved relating to responsive web design, page loading time and fast checkouts in efforts to keep consumer satisfaction a priority, one area that tends to go unobserved or overlooked is the importance of colour perception; this may be due to retailers not completely understanding the scale of the condition which therefore results in minimal solutions to resolve. Colour blindness is more common than people may think it affects 4.5% of the world’s population with 1 in 12 men living with this condition, it is an issue that should be regarded as pressing to resolve as a sizing hindrance would be. Most retailers have a clear gender bias in their target market so this percentage rises to as much as 9% for those that solely target men- this is a demographic that simply cannot be ignored by retailers.

It is the moral duty of your web designers to ensure that designs are colour-accessible and user-friendly for a wider audience. If your website has problematic colour usage or contrast issues, it can easily affect how customers use your website. If the issues are severe, they may not use your site at all and decide to purchase from your competitor instead.

So, what is colour blindness?

Colour blindness doesn’t mean that the individual cannot see colour at all in fact that is the rarest form the condition, There are many types of colour blindness but it boils down to not seeing colour clearly, getting colours mixed up, or not being able to differentiate between certain colours.

If your website has problematic colour usage or contrast issues, it can easily affect how customers use your website. If the issues are severe, they may not use your site at all and decide to purchase from your competitor instead.

Relying solely on colour for readability and affordance makes a website difficult to use, which ultimately affects readership and sales. There are some straightforward options that stand out to facilitate and if not tackle this hurdle for your site.

So, what are the options that provide solutions?

Descriptions on eCommerce websites

People with colour blindness need to rely upon written product information to decide whether or not the product is for them, so the ‘at a glance’ element of this kind of product marking is useless for about 4.5% of the people looking at the product (assuming 50% of the customers are male and 50% female). In depth colour descriptions and clear colour names can make all the difference. Simply posting a picture of the product without a clear and concise colour may render impossible to know which colour the product is to an individual with vision deficiency. Similarly, simply naming a product with general colours such as ‘Blue’ and ‘Red’ is not enough to harness in consumers that have a specific need but cannot view the colours as true to life in images “A pale blue” or “a dark red” shirt is a much better way of describing the colour of the product. Additionally, completely vague names such as ‘mist’ ‘night’ or ‘breeze’ makes shopping more of a game of gambling due to the ambiguity; A section for in-depth colour descriptions is a straightforward solution describing the tone of colour of the product. Going a step further to describe blue as royal blue/baby blue/navy blue or red as deep burgundy/scarlet/crimson- is impactful as most people who colour blindness are unable to fully ‘see’ red, green or blue hues.

By giving due consideration to the needs of the colour blind, especially in areas of the retail sector where products are heavily targeted towards males, can improve retailer’s sales when paired with colour blind-friendly marketing advice.

Not communicating errors based on colour

A common practise while designing forms is to mark a mandatory input field in a different colour. Or maybe if the user tries to submit without filling in the mandatory field, the border of the input field changes to red, indicating error. But, we must understand that not all our users experience the colours in the same way and red is one of the most used colours for this. it is important to show an error symbol as in this case or have a label supporting the error flag. Without this simple addition, frustration can occur as the colour blind user is not seeing what and where the problem is. When considering abandoned baskets, a clear error symbol in the ‘checkout’ form can lead to higher conversion of sales.

This solution isn’t limited to forms alone it is also relevant for alert messages as success and failure messages are traditionally displayed as green and red respectively.


Customising your site to provide a ‘colour deficiency mode’ can be costly and time consuming. The good news is that there are some simplistic options available that are dedicated to ensuring consumers get the best possible view of sites by offering plug-ins, extensions and algorithms that provide automated and versatile web solutions to help improve website colours for users.

This algorithm allows users to click through to a page that can be saved as a bookmarklet so it on any webpage they need it on. Similarly this extension is a customizable colour filter applied to webpages to improve colour perception. Options like these are particularly useful as they allow the consumer the freedom to use on sites outside of eCommerce.

Making it known that aforesaid resolutions are available to users via a pop up or message at the side or bottom of your eCommerce site can result in a significant positive impact on sales and brand loyalty; per those with the deficiency feeling a sense of inclusion.

Examine your website as a ‘colour blind’ visitor

The issue of having a colour deficiency friendly site might have never been considered prior to this blog and therefore may be difficult to imagine what the experience is currently like as a user of your website. That is why it is great that tools such as CanvasFlip colourblind simulator exist. The idea of such tools is to bridge this gap between designers and the experiences of a colour blind user. It can pinpoint where low contrast designs have been used or not picked up on which will help ensure the site is an all-around colour deficiency friendly site.

want to see more?