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.

Shows different types of colour blindness (deficiency)

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.

Examples of how font styles can make text stand out even when a 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.

Example of an accessibility checker results

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.

Previous

Why do you need brand guidelines?

Browse all

Journal

Next

The crucial role of Calls to Action (CTAs) on charity websites

Got a project in mind?

However big or small your project is, we’d love to see how we can help your organisation do more good.

Let's talk!
GET A FREE INFO PACK Graphic of charity design and website brochure

Our cookies

We use cookies, which are small text files, to improve your experience on our website.
You can allow or reject non essential cookies or manage them individually.

Manage cookiesAllow all

Our cookies

Allow all

We use cookies, which are small text files, to improve your experience on our website. You can allow all or manage them individually.

You can find out more on our cookie page at any time.

EssentialThese cookies are needed for essential functions such as logging in and making payments. Standard cookies can't be switched off and they don't store any of your information.
AnalyticsThese cookies help us collect information such as how many people are using our site or which pages are popular to help us improve customer experience. Switching off these cookies will reduce our ability to gather information to improve the experience.
AdvertisingThese cookies help us to learn what you're interested in so we can show you relevant adverts on other websites and track the effectiveness of our advertising.
PersonalisationThese cookies help us to learn what you're interested in so we can show you relevant content.

Save preferences

Free info pack