Accessibility in design: colour considerations

Accessibility should be a primary consideration for any materials that your charity or non-profit organisation creates and shares. After all – if some of your audience can’t access the information, it means your message isn’t getting across.

For websites, there are internationally recognised guidelines called the Web Content Accessibility Guidelines (WCAG) that give specific metrics for digital content that designers and developers will check their work against. For print, a lot of the same principles apply, and we need to use our judgement where there are no checking tools available.

In a series of articles, we’ll look at the key considerations for making your website and printed materials more accessible, starting with colour.

So, what do we mean when we talk about colour accessibility?

Colour is one of the easiest aspects of accessibility to address in design. Making a website or document accessible through use of colour means ensuring the colours you’re using will allow people with colour vision deficiencies (previously known as ‘colour blindness’), other visual impairments, or perceptual disabilities to read the text and understand elements like graphs.

Consider the use of colour to give meaning

You can use different colours to convey information or to give readers cues for action. In print this could be to show the difference between items in a list; online colour might highlight linked text in a paragraph, or be used to indicate a selection or an error.

Consider that some of your audience won’t be able to perceive the difference between the colours, so you should include additional cues, like using bold, italicised or underlined text, or by mixing serif / sans serif fonts, to make the words stand out even when the colour change is not visible.

The importance of creating contrast

Text is much easier to read when there’s a good contrast between the background shade and the font colour. Black text on a white background is clearer than yellow text on a white background, for example. Even for people who don’t have visual impairments, good contrast allows them to read more comfortably for longer, without eye strain. If a reader finds your website physically uncomfortable to look at, they’re far less likely to stick around and engage with what you’re offering.

Consider the colours in your brand’s palette – which ones are suitable for use as text and background colours? Which shades have a clear difference if you place them next to each other in a pie chart? In your brand guidelines, you should have rules established that advise which brand colour combinations will provide enough contrast to be accessible.

A tool like contrastchecker.com allows you to check the level of contrast between combinations of foreground and background colours, with clear examples of small and large text shown. If in doubt, it’s always best to choose the option that will be more easily perceived and understood.

Adept are charity design experts

We pride ourselves on creating engaging, accessible designs for charities, across printed and digital materials, including websites. To talk to us about your next project, please get in touch – we’d love to help you spread your message.