The clash of accessibility and branding
Colour contrast: Who wins out?
Let me take you back to where it all started…
The company I worked for had recently rebranded and the design team was in the midst of incorporating the new brand colours into our shiny design system. One of the goals we had set ourselves was to meet, or exceed, WCAG 2.0 AA colour contrast levels (colour contrast needs to be a minimum of 4.5:1 ratio), and now the design team was debating if this standard could be ignored for a particular button.
The debate was over white coloured text looking better to us than black text on our deep coral accent colour. The black text met contrast standards, but didn’t look that great, while the white text fell well below AA contrast standards.
Even though the dark text is the one that passes contrast ratio standards, it just looks harder to see — like the copy is almost falling into the background colour — while the white text seems to stand out more.
So what’s going on here?
Why care about colour contrast?
One of the things that designers should be aware of is how to comply with accessibility standards to include as many people as possible. One way to do this is to ensure our designs have sufficient contrast between text and background colours for people to easily read. This is not just for people who have low vision or certain eye conditions, but also for those with older and cheaper devices, times when there’s direct sunlight or glare on screens, and when we’re in dark environments.
250 million people world-wide have a visual impairment, which includes anyone from legally blind to having less than 20/20 vision. We also have to remember that visual impairments aren’t just permanent, but can also be a temporary or situational impairment as well — meaning we will all suffer it at some point. A great example of different forms of disability has been put together by Microsoft for their inclusive design toolkit.
What are others doing?
So getting back to the design team discussion…
Inevitably the question was raised — “Do other companies have a similar problem?”, “What do they do about it?” and “Do they meet AA standards?”
Obviously the first company we thought of was Airbnb, as they had a very similar coloured button to ours. Whilst comparing yourselves to others should never be the go-to, we were curious to understand what others were doing. I put together a list of other well-known tech companies and looked at their primary button colours with the Sketch colour contrast plugin Stark.
As you can see a lot of well known companies don’t actually have primary buttons that meet AA contrast ratios. Most of these companies would no doubt have accessibility standards, but when it comes to something as simple as their primary button they fail the minimum contrast test. (Not to pick on only one company here, but you can see that Trainline used to have button colours that met AA contrast standards, but sometime in 2017/18 they actually changed it…for the worse 🤔).
I’m sure that every product designer at these companies would be aware of this simple accessibility downfall, but their hands are tied to actually be able to change anything. There could be any number of reasons for this:
- Maybe the branding was put in place long before they were there?
- Maybe marketing has the final say on colours outside of the product UI?
- Maybe they’ve attempted to change colours to be more accessible and couldn’t get internal buy-in?
- Maybe they were just simply told “it’s always been that way” and to move onto more important things?
- Maybe they’ve decided they don’t need to meet AA contrast guidelines (or that an A standard is good enough)?
- Or maybe they’ve done plenty of usability testing and it’s never been mentioned/observed to be a major issue?
All I can conclude from this is that branding is seen as a higher priority than accessibility…and I get why — visual branding is a big part of what makes a company recognised and loved by people, to change it after people have grown used to it could be seen as too big a risk.
The only way to avoid these situations is to prioritise accessibility and inclusion at the very start of a company. If you’re one of the very first designers in a company make sure that accessibility has a voice in the early stages so others don’t have to make a choice between accessibility and branding later on — don’t wait for the rebrand to happen to fix it. 😇
…oh…and what happened to the use of our accent button you ask? We decided in the end that it shouldn’t be used and we removed it from our design system. 🤓
While I was writing this, Ericka Seastrand wrote an even better article which asked a similar question — and she’s done a fantastic deep-dive into it.
