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:
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
- This is a colour accessibility tool I work with regularly.
- This is a thorough example of the process of how one designer updated her entire brand to ensure it met the Web accessibility guidelines.
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.
