How do brand colours impact Web accessibility?

How do brand colours impact Web accessibility?

Turns out, quite a bit.

Take a look at the video below for a very clear-cut example of how colour accessibility impacts an audiences’ ability to understand the impact of your brand.

As a marketer, it’s your job to recognize that all elements in your brand should have enough colour contrast. You need to ensure that everyone, regardless of their ability to see colour, can understand what you’re trying to convey. Otherwise, your audience might not even be sure of which team their cheering for. 🙈

Still not convinced brand colours impact Web accessibility?

Take a look at the two images below and consider which is easier to read at first glance:

Two phone screens side by side. One on the lest has colour contrast that's much easier to read.

The changes are subtle but significant.

When you look at these two images side by side, you can see that the one on the left is easier on the eyes. Although the colours that they use are extremely similar, the reason that the one on the left is more visually pleasing is that the colours are compliant with Web Content Accessibility Guidelines 2.0 (WCAG 2.0).

What are Web Content Accessibility Guidelines 2.0?

WCAG 2.0 is a set of guidelines published by the World Wide Web Consortium’s (W3C) Web Accessibility Initiative (WAI). These two established groups have been working to make the internet a more accessible place for many years. The goal of the guidelines is to provide everyone with a clearer set of parameters that developers, brand managers, and marketers apply to their web content.

In terms of colour accessibility, brands should use contrast to measure the difference between two colours. Said differently, instead of thinking about how different colours go together aesthetically, you also need to consider how easy they are to see if you have any type of visual impairments. Please rewatch the video above if you’re still feeling unconvinced.

In the guidelines, the differences in colour are looked at in terms of brightness, which is then measured as a ratio. For example, white on white would have a ratio of 1:1 and black on white would have a ratio of 21:1. Using these ratios is what will help guide you in choosing colours and tones for your brand material so that everyone can easily see them.

Colour accessibility tools

Better readability helps everyone

Today, we use a range of devices, such as smartphones and laptops, to browse online. We all use different apps and have different screen settings. Understanding what this means to your work and how it impacts people will help you understand why Web accessibility needs to be a priority. When you include colours that are accessible based on contrast ratios you’re creating material that better serves everyone.

By Christine

Hi, I'm Christine. I'm a public speaker & marketing professional with a specialization in digital strategy. I live and breathe all things content & marketing. In my previous positions, I've done everything from rebranding companies, launching new SaaS products, writing sales copy, and developing long-term SEO & social strategies. I believe that quality communication and measurable results are the key to every digital marketing strategy.