Colour Accessibility: What role does it play in your marketing?

Colour Accessibility: What role does it play in your marketing?

Did you know that 2.2 billion people worldwide have a vision impairment, and 1 in 12 men and 1 in 200 women are colour blind? Have you considered how these statistics and how your website and marketing might present to these people? Read on, to find out about colour accessibility.

If not, you could be losing out on potential business or making it hard to convert prospects to customers – after all, you want to make sure they can find your call to action. 

Remarkably, as someone with poor vision in the creative industry; I am one of these statistics, so this issue hits close to home. 

I can’t tell you the number of times I’ve seen aesthetically beautiful marketing campaigns, that I haven’t been able to read without smooshing my face against the creative to take it all in. However, with some tweaks, you can take your marketing and make it accessible for us poor vision and colour blind folk. 

Colour Accessibility: What is it? 

When following colour accessibility guidelines, you’re looking to maximize the contrast of content and backgrounds so that all text is legible for people with low vision and colour deficiencies. 

With the use of online tools, like this contrast ratio checker – you can find out where your brand and marketing currently sit on the scale of accessibility. There are equations provided by the WCAG (Web Content Accessibility Guidelines) that determine two values.

  1. Score
  2. Ratio

By using online WCAG colour testing tools, you can input your brand colour combination to get a ratio score from 0 to 21. This number indicates the level of contrast between your colours – 0 being low contrast and 21 being high.

There are a variety of conformance scores when looking at your colour combinations, which have been created based on the restrain they put on design. 

  • Score: FAIL  No impact
  • Score: A  Low impact
  • Score: AA Medium impac
  • Score: AAA  Heavy impact

With more restraint comes higher legibility but comes at the cost of creative flexibility. 

Let’s look at an example

If we take Rezdy’s blue and white colour combination from their brand guidelines and input them into the contrast ratio checker,  they receive a AAA score – great job Rezdy!

Contrast Rezdy

What this score means is that the colour contrast is sharp enough that text is legible for both large and small text and that these colours meet the optimal standards people with low vision and colour deficiencies. 

Now if we look at the same colours again, but make the blue slightly lighter, this drops the contrast to 5.98 or a AA (AAA Large Text) rating which is still an excellent combination of colours and will suit most users.

Contrast Ratio 5.98

In most cases, brands only require a small tweak to their colour combinations and its something that can be done gradually over time. If your brand sits within a AA rating, then you’re doing an excellent job. If you want to move from an A to AA to an optimal AAA rating, some quick wins could be:

  1. Increase your font size – an AA rating can quickly jump into a AAA rating by increasing font size.
  2. Add some tint (lighten) or shade (darken) to your colours – adding some tinting or shading to your background colour or text colour until the contrast ratio is vast enough to move you into the next score.

Below are some examples of different shades of the Rezdy blue to show you the difference in score outcomes based on adjustments to the colour contrast ratios:

Contrast Ratio 1.18

Contrast Ratio 3.23

Contrast Ratio

Contrast Ratio 7.5

Most businesses should be aiming for a AA rating; however, If all of your marketing sits in the FAIL or A rating, it’s time to consider how you tackle your brand and making necessary changes to overhaul your choice in colours to better serve your customers with low vision. 

For more information about 55 Knots, and their creative services, visit their website.  For more information about the author, visit Benjamin Williams LinkedIn page.