Colour blindness is really common, affecting 1 in 12 men and 1 in 200 women.
It can bring many challenges, for example not being able to see if a banana is ripe or unripe. Not being able to cheer on your football team because the colour of the opposition kits is too similar.
Of course, colour blindness can be a challenge in the digital world too.
For Colour Blind Awareness Day on 6th September, we’re sharing five tips on how to design your website to be accessible for people who are colour blind.
- Links: if you want people to access your content make sure links are clearly visible. They should be underlined because the colour contrast on the text might not be enough.
- Colour as a command: using red for urgent alert notifications, or highlighting errors in forms, isn’t helpful for people who can’t perceive red. Combine colour with words, patterns or icons to convey meaning. For example, error messages can have a wide border along their leading edge.
- Colour choices: being unable to distinguish between red and green is the most common version of colour blindness, so be wary about using those colours together.
- Colour contrast: when placing text on a coloured background, good contrast between the colours will help legibility.
- Text and images: if you use text on top of an image, consider placing a solid or semi-transparent layer between them (sometimes called a scrim) to help make the text more readable.
The Let’s Get Colourblind extension for the Chrome browser simulates the information a colour blind person receives. Have a look at your website through a different lens.
Visit the Colour Blind Awareness website if you’d like to know more about colour blindness.
You can find lots of helpful advice in our guide to accessible content.
