An illustration of a girl sat at a computer

Colour accessibility in email design

When designing emails, it’s important to consider colour accessibility. Approximately 4.5% of the population are affected by colour vision deficiency – that’s 3 million people in the UK alone. Plus, if your audience is predominantly male, a whopping 1 in 12 are affected – compared to only 1 in 200 women.

 

Here’s what our Senior Digital Designer, Helen, had to tell us.

What is colour vision deficiency (CVD)?

Colour vision deficiency is the inability to distinguish between certain colours. It’s often called ‘colour blind’, however, complete colour blindness is extremely rare. The most common form is known as red/green colour blindness. As suggested by the name, these individuals have trouble distinguishing between red and green, but it can affect people in various ways. People might also have trouble seeing shades of purple, confuse reds with black, or see colours as duller than someone without CVD.

Think you can relate? You can always take an unofficial online colour blindness test.

Colour blind test
imgur.com

How does this affect email design?

If you’re worried about colour accessibility, specifically what your emails look like for people with CVD, Chrome DevTools enables you to emulate vision deficiencies within the web browser. If you find the experience isn’t great, don’t worry, you can make some small tweaks without having to redesign the whole email.

 

There are two main things to consider:

1. The colour contrast

The contrast ratio is important for everyone, but especially for those with a visual impairment. Put simply, the contrast ratio is the difference in brightness between the foreground colour (type, logos, graphic elements) and the background colour. This difference is shown as a ratio and ranges from 1:1 (e.g. white on white) to 21:1 (e.g. black on white).

The Web Content Accessibility Guidelines (WCAG) are set by the World Wide Web Consortium (W3C) – the international standards organisation for the internet – to make the web more accessible for people with disabilities. They state that the colour contrast should have a minimum ratio of 4:5:1. To make sure your colour contrast complies, the WCAG have created a calculator that easily lets you check your colour contrast.

An example of contrasting colours
An example of using black and white colour contrast

2. Don’t just rely on colour

As people with CVD are unable to differentiate between colours, don’t just rely on colour to make elements stand out.  To improve colour accessibility in your emails, make sure you include other visual features to convey information. For example, if you have a text link, don’t just change the colour, change the weight and/or underline it too.

Example of using colour and icons
Example of using colours and numbers

By making these simple changes to your email templates, you can improve the accessibility of your emails and ensure all users get a positive experience.

If you want to improve the accessibility of your emails, our Managing Partner Ian Reeves loves a chat: ian.reeves@flourishworld.co.uk