Basics:
Color in Email
TLDR; Check your designs for color contrast, and test for dark mode color contrast as well, underline those links, but most of all – communicate color contrast issues!
Color contrast is at once one of the easiest accessibility criteria to meet and one of the most overlooked. I think it’s really easy to not pay attention to color contrast or assume that if you can see it, it’s fine… but that’s a kind of rigid refusal to better understand someone else’s experience and since that’s part of what I’m trying to do here, let’s get into it.
Who are we creating for when we use good color contrast?
There’s a bit of a misunderstanding on the specific disabilities we’re focusing on when we’re talking about good color contrast.
First – this is a very clear example of the curb cut effect, everyone benefits from good color contrast. If you’re trying to read your email in a dimly lit room or while you’re driving (please don’t) good color contrast is going to make that easier for you.
Second – we are largely focused on two groups when we’re talking about color contrast: folks with color blindness and folks with low vision. Color blindness affects 8% of men in the world, and 0.5% of women. This is usually an inherited color vision deficiency, but can also be caused by different conditions and can have varying degrees of severity and intensity. 7 million people in the US alone are living with uncorrectable vision loss, including more than 1 million Americans who are living with blindness. Good color contrast makes it easier for both of these groups to see and read our content.
Why does color contrast get left out?
In my experience, the single biggest reason color contrast doesn’t get included is branding. Or rather, the lack of considering accessibility when determining brand colors – and the lack of accessibility controls that guarantee certain colors are used correctly.
It’s okay to have branding colors that are lighter – you just can’t use that lighter color as text on a white background, or as a CTA color, etc.
Good color branding should mean good color contrast, and generally that is the case, but when I run into color contrast errors during my audits it usually boils down to the brand colors not used appropriately. Specifically – that bright color in the brand colors is used for a CTA but it doesn’t actually have good color contrast to the background color.
I highly recommend to anyone that works with company branding to consider adding to existing brand color guidelines to clearly call out color contrast requirements. Lots of them are this robust, but plenty of them are not!
Color Contrast and Conformance Level
There are two WCAG guidelines around text color contrast: SC 1.4.3: Contrast (Minimum) (Level AA) and SC 1.4.6: Contrast (Enhanced) (Level AAA). You’ll notice that one is Level AA conformance while the other is Level AAA conformance and has a much higher color contrast ratio requirement. Generally speaking, most of us are focused on Level AA at least when it comes to color contrast requirements, but you’ll want to consider your audience when you make that determination. I would expect that if you served an aging population, or say, send emails for the RNIB (Royal National Institute of Blind People) you may determine that you should be squarely in Level AAA conformance.
If you mess around with the sliders on the WebAIM contrast checker you can see how much more significant the color contrast needed to meet the Level AAA conformance is.
Using color to communicate
You might be wondering how many WCAG criteria there are about color and guess what? There’s still more! SC 1.4.1: Use of Color (Level A) is a bit of a twist from what you normally hear about with color. This criterion focuses on how you use color – or more crucially – how you’re not using color. A friend of mine is a statistician and a good deal of her work is compiling data into charts to present to her colleagues. We had a fun dinner party chat about accessible charts and how you can’t only use color to showcase data. This is probably easiest to visualize in this pie chart example from this great post on data visualization accessibility:
As you can see (or not see if you’re color blind) is that using color only to communicate often fails to communicate!
Depending on who you’re sending emails for, you may not be sending many charts, but we still have to meet this criteria in email.
The very most common scenario we see this criterion failure in email? Links that are only distinguished by color! This is literally a failure document – F73! Because this is a Level A conformance level we must make sure our links are obviously links – this is most commonly underlined as the common standard. You can do it differently, but in the case of links, I think the more standard, the better.
We also commonly see this on our signup forms and preference centers – the error cannot only be red, that asterisk is communicating just as equally! Likewise, disabled form elements can’t just be grey – there has to be some other way besides color to communicate to the user that element is not available.
Color Contrast and Dark Mode
Ugh. What about dark mode? And why can’t all these various algorithms that support dark mode get on the same page? </endrant>
I feel like most in email marketing and the broader development space know a good deal about dark mode wonkiness. In email – we have email clients that ignore dark mode completely, do a full invert of colors, or a partial invert – with any number of weird variations. Like in gmail, where some social icons might invert, some may not. It’s a bit of a mess.
If you want a full list of dark mode solutions, please check out Matthieu Solente’s Dark Mode Rules on github, which has become a well-worn resource on the subject.
In some email clients we can control some text and background colors using specific dark mode styles – but they don’t work everywhere and we’re generally just trying to patch up the damage to get things looking remotely good in dark mode.
Note: When I’m talking about dark mode I’m specifically talking about enabling good rendering for users while in dark mode – we are not forcing light mode! No – don’t do that!! Our users, with and without disabilities, want to be able to use dark mode – that’s why they turn the setting on. I shouldn’t have to say this anymore, but our goal should never be to force white/light background colors on users! This is also an accessibility issue – users with dyslexia and low vision often use dark mode (or dark-mode adjacent AT) to better read the content. So do not, under any circumstances, force light mode on your users!!
Brands tend to get into a bit of trouble once branding colors come into dark mode. What was a bright and cheery yellow turns into brown sludge. What was a demure midnight blue is now a bright lavender. Medium tone colors seem to fare a bit better as the invert of medium blue is just a different medium blue and tend to stay the same in a large number of dark mode email clients.
The problem here is that with all of this variation on dark mode color changes, we really don’t have a lot of control over color contrast when things change to dark mode. Which is super annoying, can’t the algorithm consider color contrast ratios? That would be great if they did!
In the meantime – a solution I’ve seen popping up more and more is for brands to actually test their brand colors in various scenarios to determine the best case scenario for dark mode color changes. Run a test through your email testing service of choice and then check those dark mode colors for contrast.
Is that a lot of work? Yes! Is it worthwhile information for brands building modular systems or color standards? Absolutely. This is critical information for brands, especially for brands that already know their user base engages in dark mode (which is a whole lot of people at this point, but I digress)
Rigorous color testing isn’t going to totally solve your problems, but it will give you information that can help reduce the amount of problems you have creating emails that work well in dark mode. You’ll likely still have to search through Mathieu’s list to solve some problems, but it won’t be as challenging.
A quick caveat to this plan:
Dark mode in email clients is still an evolving space. It’s way better than it was a few years ago, but things are still changing. That means you’ll want to occasionally go back and review these color tests to see what might have changed.
Text Formatting and Color Contrast
If you use my favorite color contrast checker from WebAIM, you’ve no doubt read the slightly confusing verbiage about font sizes and bolding. It’s really not hard, but I feel like it’s worth visualizing.
WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.
I think the harder part here is the font sizes – 14 point, 18.66px? Why the specificity here? That’s a whole other conversation – best stated by the amazing Josh W Comeau in this article about pixels vs rems. He gets into a whole lot more detail than I am here, so a bit of a summary is that to support users that may choose to view content in various ways, like using some kind of zoom functionality – our text needs to be set in relative units instead of absolute units. So when the WCAG tries to define these font sizes, it’s getting pretty granular in an attempt to define standards on something that is intentionally flexible.
I might write a post about that someday, but for now I’m going to generalize these numbers down to pixels as that’s what most of us are already used to and because I don’t want to do that much math on a Thursday night.
| < < < Normal | Large > > > | |||||
| 14 | 16 | 18 | 20 | 24 | 30 | 36 |
| 10 | 12 | 14 | 16 | 18 | 20 | 24 |
These rules are pretty easy to follow once you see the visual, but I think it’s useful to think a bit past these two text formatting options. I had a client that used a lightweight font that looked really, really light in outlook. It just didn’t translate very well, and while the color contrast met ratios for “Normal” sized text, it just really wasn’t legible. The same is true of other specialty fonts, where they just might require a higher contrast level than what meets criteria. Some fallback fonts might visually look smaller than their branded/google font so what looked okay in one email client, might not be legible in another.
The ratios are also important – they are the bare minimum, so tread carefully. Is this CTA that just barely meets color contrast requirements the best idea? Maybe not.
All that to say – these contrast checkers are good starting points, but it’s okay to lean in a bit more to color contrast in some scenarios.
Color Contrast and Background Images
When we’re using background images we also need to manage color contrast, and this gets pretty dicey. If your background image has any variation in it, you’re going to be spending a lot of time getting that text to lay on the background image just right. And that’s not considering users who use a zoom tool that may zoom in on that content which will make that text fall over areas where the color contrast is not perfect.
That is still a color contrast failure, even if it doesn’t happen for most users!
Especially if you recall that we are ensuring color contrast specifically for low vision users, who are the users that also use zoom tools.
So we really need to be careful when using background images in this way. Any text or CTA’s or other graphics should still meet color contrast requirements even when zoomed into 200% on various devices. Usually the best/easiest way to do this is to set that background image so that the whole area will meet color contrast against the foreground content.
This gets even more complicated when you consider dark mode! Usually the background image in dark mode doesn’t invert or adjust at all, but the foreground content will. So black text on top of a very light background image will invert to white text on top of a very light background image. There are ways to fix this in some email clients, but not all.
The solution I’ve found here is to use a transparent PNG file with a background color that is set in the HTML/CSS that can then invert when in dark mode which will allow that inverted text to still look good. (Assuming you make the appropriate precautions about color inverts I mentioned earlier)
Color Contrast in Graphics and non-text elements
Don’t forget that there’s also a WCAG guideline for graphics too – that’s right! Your Graphical Objects and User Interface Components also have to meet color contrast requirements – that’s WCAG SC 1.4.11: Non-text Contrast (Level AA). Any element that is required for the end user to be able to understand or use the content must also meet color contrast requirements. This ratio is at 3:1 like large text, but thankfully that WebAIM contrast checker also has a spot for these elements as well.
This seems like a good time to also point out that our CTA’s also need to meet color contrast requirements – and not just the button from the background! The text, the CTA/button color and the background color all have specific color contrast requirements too. My favorite tool for this is probably one of the funner ones to use, it’s Button Buddy! The text to the CTA is dependent on the font size of that text similar to what we discussed above so larger text won’t have to have as high of a contrast ratio.
What’s an email marketer to do?
I cannot stress this enough – the most important thing you can do when it comes to color contrast is to communicate!
Yes, obviously also test your colors – especially if you’re the designer – but more than anything you need to communicate this requirement up the food chain.
Short story: A few jobs ago I had a client that had a modular system built using the client’s brand colors. As part of my accessibility design review I called out the bright orange CTA’s that were just a little too light to meet color contrast against the white background color. I let the designer know and their response was… “I don’t think this client is going to change their brand colors for this” and they did not pass that information along to the client. Guess what? A handful of months later the client had an audit with an accessibility agency and you’ll never guess what they flagged – and then asked that designer why it had passed our tests. ☠️
So yea – please make sure you communicate this issue. We don’t need to make these decisions for our clients! And honestly – I’d much rather advocate for a positive change and be shut down than to not even try.