Question:
How do you work with brands with already-established colors that don’t meet WCAG contrast requirements?
If you want to ask me a question and have me answer it here, please go to this a11y.email questions google form. This is a no-judgment way to get your questions answered!
Answer:
This question comes from a litmus webinar from earlier this year and while I answered at the time I felt like it was worth a more in-depth post.
Color contrast issues are one of the most common accessibility failures I see – both in my accessibility audits and just as a person existing on this planet. It’s absolutely everywhere.
And when I first started I thought it was a pretty confusing scenario because despite its frequency – it’s really easy to fix. Just drop your hex values into the WEBaim.org color contrast checker and – boom – red x or green check you know if you’re meeting requirements. They even give you a little slider so you can adjust your colors a bit to get them to the green check – it’s super easy.
So why does it keep existing as a problem?
From my experience the biggest culprit here is branding, with a close second being designers (or decision makers) who insist the color contrast doesn’t matter. (ugh)
And the branding team works really hard to convince you that the branding colors are some kind of monolithic structure that cannot be altered. That these colors mean something and any adjustments could have cataclysmic impacts on the company bottom line.
Ugh again – because they’re missing the whole point!
Your brand colors are meaningless if your content cannot be read – it really is that straightforward.
But I know – I know – it’s not you, dear marketer, but your branding team (or designers, or your client’s wife, etc) – that is making this a problem.
The first and most critical step: Tell them!
Yes that does seem pretty simplistic, but if someone is wanting you to use a color combination and a quick drop into a color contrast checker shows this combo as a failure – your first and most critical step is to tell someone.
Real talk – this isn’t likely to do anything… at first. I think I called out color contrast issues at least 30 times before anyone did anything about it. But that’s not the point! Moving towards accessibility best practices doesn’t happen all at once, nor is there a heroic conversation to be had – this is just another conversation at the office.
You have conversations like this all the time with these people – that gif is too big, that font won’t work on Outlook, that random rendering issue on Opera on a blackberry isn’t worth chasing, etc.
You just have to call it out – for you, not for them – so that you did it. Advocacy can’t happen if you don’t open your mouth and no changes happen if we take what we are given and just push it through.
So a very clear “Hey, I checked and the color contrast on that headline text, it’s too light. It would need to be #123456 in order to pass color contrast”. Maybe they take you up on it, maybe they don’t, but maybe at some point down the road enough people have called this out that at the next redesign that stakeholder gets to ask that question and it gets adjusted.
Second step: Get backup!
I’ve also found it’s helpful to do some additional legwork. Plant a seed with your designer by sending them an article about color contrast and then next time you find an issue you can all it out to them and (hopefully) that seedling blossoms into them being cc’d on a client email to say “oh yea we really shouldn’t do that”.
Another thing I’ve found recently, and this really surprised me – check the website. The website for sure has this same mockup of color combos and 90% of the time that color has been tweaked to meet color contrast. I have no idea how the web guys get away with it but I assume it has something to do with the fact that websites are more likely to get audited then emails and they’ll change it on websites and it doesn’t get updated anywhere else. This solution works really great because in your initial email about it you can add “And I noticed on the website that this color is actually tweaked to #123456 which passes color contrast” This is the easiest/best answer and almost certainly a begrudging yes from the stakeholder.
Third step: Keep bringing it up!
Look, I’ve been talking about accessibility for quite some time now and as much as I’d love for my initial attempts at email accessibility advocacy to have been met with resounding approval – that’s just not really how it works.
Here’s how it has worked for me, and I think it can work for you: Every time something is wrong you bring it up.
It doesn’t have to be a big emotional plea or anything crazy – just a “hey just an FYI that I’m still seeing that color contrast issue” or “of course we can continue to use images of text, just know that these emails will continue to cause accessibility problems for lots of different users”. Just keep talking about it, there are so many different ways to bring up accessibility – just keep going.
Will you be annoying and cause probably a few eyerolls? Maybe.
But slowly, eventually, whomever you’re talking to is going to hear something that directly impacts them about accessibility. Maybe it’s a friend’s company being sued, or maybe they break an arm and have to use assistive technology for the first time, or a sibling will be real about their MS struggles, or maybe their kid will develop dyslexia (1 in 5 kids have dyslexia).
But they’ll hit a point where they cross over and start to understand the value of what you’re saying and they’ll start coming around.
But none of that can ever get started if you don’t open your mouth and call it out!