Why you should make your website colour blind friendly
First things first, colour blindness is a misnomer. The condition is actually colour vision deficiency as true colour blindness is where no colour can be seen at all, which is rare.
According the the HSE(Irish Health Service) “people with colour vision deficiency, are unable to see colours the same way that most people do, and they may have difficulty distinguishing between two different colours.”
How common is colour vision deficiency?
Colour vision deficiency affects approximately one in 12 men, and one in 100 women. In most cases, the condition is inherited. Therefore between up to 13% of your website visitors will have some form of colour vision deficiency which is a noticeable percentage you your market or target audience.
Types of colour vision deficiency
There are three main types of colour vision deficiency:
Red-green deficiency (deuteranopia). This is the most common type. People with this condition cannot distinguish certain shades of red and green.
Blue-yellow deficiency (tritanopia). This type is rare. For people with this type of colour vision deficiency, it is difficult to distinguish between blue and green. Yellow can appear as a pale grey or purple.
Total colour blindness (achromatopsia). And this is the rarest type of colour vision deficiency. It is where no colours can be detected and everything is seen in shades of black, white and grey. People with this condition have poor sight and are very sensitive to light.
How can we help people with this condition regarding web design?
1. Clear colour names
Use clear colour names close to primary colour names as possible. Example, black shirt, light red trousers and dark green shoes. Eliminate fancy colour names such as olive, amethyst, rose gold, blue lake etc.
2. Avoid colour instructions
Labelling required fields on forms is very common but unfortunately not helpful to colour vision deficiency users. They may get frustrated on filling in that important business contact form and give up which could in turn lose you a potential lead. Its better to write the word (required) or put an asterisk next to the required field.
3. Contrast design
High contract design helps distinguish words and colours on a website. This is more important when deciding on text foreground colour against background colours. Light greys on light background may like nice to one person but the text could be indistinguishable for others.
4. Text readability on images
Text on images can be very hard to see unless the text is light and the image is dark. Use a layer mask to darken the image to increase contrast and readability. I actually find text on images can cause a slight headache unless there is sufficient contrast.
5. Link recognition
Underline links to make them noticeable. Red highlight may not be helpful or hover only may be completely useless to people affected by colour vision deficiency.
I recommend and use an app called Color Oracle that can be got here. This simulates the three colour deficiencies on your computer so you can test any web page or app you are building.
At the end of the day, if a buyer can’t see a link to purchase or be able to pick out a piece of clothing or can’t fill in the contact form, whats going to happen? Yes you guessed it. Lost sale!. To further compound the problem they will go to your competitors and purchase from them. 12% of men and 1% of women that could translate into €120 out of every €1000 of online sales for mens clothing.
With such easy fixes and no major alterations to your website, you could be ensuring all your buyers and leads will do business with you.