How to Design a Colorblind-Friendly Retail or Law Firm Website

How to Design a Colorblind-Friendly Retail or Law Firm Website 1

Image credit: Henrik Dolle /

Sharon Simmers* A significant part of the American population suffers from color blindness. It is caused when photoreceptor cells called cones in the human eyes are either defective or completely absent. The condition is usually genetic and is present from birth. 

Sometimes it can also be the result of trauma, diabetes, or prolonged exposure to UV light. Contrary to popular belief, colorblind people do not see everything in grayscale. However, their ability to see and distinguish colors is a bit diminished from other people.

Colour plays several essential roles in any retail or e-commerce website along with law firm sites. Lawyers are obviously those who need to be aware of the need for their websites to cater for those with disabilities and the need to retain awareness of color blindness is one that can be catered for easily.

However, most business owners and designers often fail to consider the perception of color by those who suffer from Colour Vision Deficiency, also known as color blindness.

This affliction can prevent a person from accessing vital information on a website or even use it altogether.  Failure to optimize a website for color blindness can result in loss of business and devaluation of the brand image. Fortunately, you can avoid the issues with a few simple measures and design a colorblind-friendly e-commerce website.

Use Names for Colors

Colour blindness is known to affect men a lot more than women. So if you sell anything targeted towards male customers, you should pay attention to the color choices and designs. People who suffer from colorblindness face difficulties to understand the real color of products like a shirt or a shoe.

They often have to seek help from another person to tell them about the color of a product. That is why most colorblind people prefer to shop online because it is considerably easier than shopping at a physical store. But to ensure their convenience, you have to make sure that you use names for the colors of the products on your website.

Let’s say that your online retail store sells T-shirts. It might be difficult for a colorblind person to understand the color if you only have the T-shirt photographs. Some websites also use ambiguous names like ‘Mist’ or ‘Grimstone’ for colors and leave customers baffled. So use common and basic terms like red or blue to explain the colors of products on your retail website.

Do Not Rely on Color Swatches Alone for Search Filters

Colour filters for product searches and another problematic area for colorblind users. Some websites use unlabelled color swatches, which would make no sense to people with color blindness. That is why many websites remove color swatches entirely and only use names for colors instead.

It might seem like a good idea, but we should also remember that it is not like colorblind people cannot see any colors at all. Moreover, removing color swatches can make things difficult for regular users as they would have to read each label to find the colors they are looking for on your site.

It can hamper customer experiences from your website, and they turn to your competitor. So the best solution would be to create clearly defined labels with color swatches with the names for the colors. Some websites only display the color names when a user hovers the mouse over the color swatch. It can create accessibility problems for other users with visual impairment.

Avoid Color-Specific Instructions

Forms are an indispensable part of any e-commerce website. People need to fill up their mailing address, billing address, financial information, and several other form fields. Many websites use color-specific instructions such as indicating the required fields in red. But such a form might prove difficult for a person with color blindness. 

Therefore, it is better to write text references on forms so it does not confuse colorblind customers. The process will also ensure that forms are decipherable by screen readers for those who are completely blind. If you use buttons on your website, make sure you avoid color-specific instructions for them as well. For example, instead of saying ‘click on the green button,’ it is better to say ‘click on the submit button’

Use Optimum Color Contrast

With the popularity of pastel colors these days, designers often create low contrast illustrations or graphics. While such subtle designs exude class and sophistication, they may present difficulties for those suffering from vision deficiencies, including colorblindness. A potential customer could miss out on essential product details, which could prove damaging to the brand.

Achieving all of these aspects on your website may seem intimidating and expensive, especially if you already have a fully functioning website. But you will be happy to know that you do not have to redesign your website entirely or hire expensive developers to modify the codes.

Instead, use an AI-powered accessibility software that can optimize your website for customers with any form of disability. You can install fully automated software like accessiBe or Level Access to make your website accessible.

The software makes the necessary corrections to your website according to the needs of the customer. The modifications are based on the current Web Content Accessibility Guidelines (WCAG 2.1), which also makes it ADA compliant. The best part is the software audits your website to find out the accessibility issues and provides a report before making any changes.

You can also use tools that simulate various types of color blindness to check your designs for potential problems. Adobe Photoshop and Illustrator offer simulation options for the common types of color blindness. There are extensions available on Github that can analyze the color contrast for your designs on sketching software.

Providing a good user experience is essential for any retail or e-commerce website, especially for people living with disabilities. You may be surprised to know that one in every four Americans suffers from some form of disability.

Optimizing the accessibility of your website can help you tap into a large consumer market. You will also gain the approval of people who prefer to associate with companies that take a social stance. We hope that these insights prove helpful to make your retail website more successful.


Sharon Simmers is a freelance writer who writes about web design and online marketing for publications, including how they should deal with people with disabilities.

Scroll to Top