In today’s day and age having a colour blind accessible website is not optional, it’s a must. Colour Blind Awareness statistics state that up to 4.5% of the population suffer from colour blindness, which may not seem a high number but here are the facts:
Why build a colour blind accessible website?
At the moment there are around 3.435.598.500 internet users in the world and this figure is growing rapidly. If we do the math, around 154.601.932 internet users are colour blind – this means they might have a hard time viewing and using your website. That’s a huge chunk of the population!
Before you start thinking about costs and figures, let me lay it out for you: designing colour blind accessible websites doesn’t make it more expensive, on the contrary: considering the fact that you cater to ~155 million people will pay out big time in the long run.
What is color blindness?
Colour blindness comes in all shapes and sizes. Some individuals may have trouble differentiating between certain colour combinations, some may not see certain colours clearly and some users can get different colours mixed up.
Other factors such as glare, screen size, lighting or the quality of the screen can also influence user experience which can ultimately reduce your sales or bounce rate.
As mentioned before, designing colour blind accessible websites won’t be more expensive or take ample amounts of time. Here are 13 tips on how to design or change your website in order to improve user experience:
1. Text readability
Text size, background colour and text colour are factors which ultimately influence text readability. When designing a colour blind accessible website programmers need to follow specific accessibility guidelines in order to ensure user experience for individuals with colour vision deficiency.
2. Text & Background images
Trying to place text over images can be difficult at times simply because the image can lack contrast with the text. A good idea is to reduce the image’s opacity which in turn can make the text easier to read by increasing the contrast. If meddling with the image is not an option, you can change the contrast of your text to achieve the desired effect.
3. Colour swatches, pickers or filters
A great and simple solution to this problem is to add text labels next to the colours themselves. This little trick can also help users which don’t suffer from colour blindness as well.
4. Add descriptions to your pictures
Adding descriptions to your pictures removes any guesswork for colour blind individuals. It can also help people with other eye problems.
5. Recognizing links
In order for a website to be colour blind friendly, links need to be easily spottable without using any text colour. Users suffering from achromatopsia can’t see colour so it’s a good idea to add some specific text before placing a link – eg. “Click here to learn more.”
6. Colour combos
Colour blind individuals see the world differently. They also see websites differently. Certain colour combinations should be avoided in order to improve user experience: • Green-black • Green-grey • Blue-grey • Light green-yellow • Green-blue • Blue-purple • Green-brown • Green-red
7. Colour-blind friendly forms
Using placeholders without labels can also be problematic for some users as most colour blind individuals will not be able to see the text due to its low contrast. It’s a good idea to have forms with labels for each input line.
8. Primary buttons
Designers often use colours to differentiate primary buttons. This is not necessarily a bad idea but in order to improve user experience other things such as icons, borders, size, placement and contrast can be changed in order to make them more noticeable.
9. Alerts and messaging
Error messages are usually coloured red and success messages are usually coloured in green. Although most people won’t have any trouble in seeing these messages correctly, it’s a good idea to add prefix texts such as “Operation failed” or “Task failed” to your messages and alerts - It’s a whole lot easier to read and understand.
10. Required form fields
Obligatory form fields should be differentiated through other means than colour alone: • Removal of optional fields • Marking certain fields with text – “required” • Marking certain fields with an asterisk
11. Colour blind friendly graphs
Graphs are usually made up of different segments of colour. Placing text within each segment can make your website more colour blind friendly. On the other hand, if the segments are too small or narrow for text, you can just use a key to denote different segments.
12. Zooming is a very helpful feature when building a colour blind accessible website
Zooming can improve readability for most users, not just colour blind individuals. While some designers choose to disable zooming on their websites, it’s a good idea to leave this essential accessibility feature on.
13. Relative font sizes
Browsers can increase text size in order to improve readability but this is not always the case. This function can be disabled if the font size is measured in pixels for example. The key to building a colour blind accessible website is using a relative font size unit such as ems – this will help users avoid headaches caused by tiny text.
It’s time for testing!
How can you see if your modifications are done properly? Here’s a small list of tools which you can use: 1. Check My Colours – Simply enter your website’s URL and get some feedback 2. Colour Contrast Checker by Web Aim – Enter two colours and see if they can work together 3. I Want To See Like The Colour Blind – Name says it all. Also my personal favourite. 4. Colour Oracle – colour blindness simulator which can work on Linux, Mac and Windows.
Conclusion
Always remember that between looking good and functionality, most visitors would prefer the latter.
