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.
And of course, colour blindness can be a challenge in the digital world.
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 to highlight error messages in forms is not helpful if you can’t perceive red. Use both colour and words, patterns or symbols to convey meaning. For example, error messages can have a wide border along their leading edge.
- Colour choices: not being able to distinguish between red and green is the most common version of colour blindness so those colours shouldn’t be used together.
- Colour contrast: where you have 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.
