Dark Mode vs light mode emails

Accessibility and Dark Mode: The Latest Buzz Words


Here at Email on Acid I’ve been hearing the words Dark Mode a lot lately. And Accessibility is an important issue for our CEO John Thies, so when he asked me to see if it’s possible to change the colors of an email using code when it renders in Dark Mode—and have it stay accessible—I thought, “challenge accepted!.”

See, We’re very serious about emails being accessible for everyone, and this was a great opportunity to explore accessibility and dark mode emails with some interesting results.

Want more info on dark mode? Check out our Desiging Emails for Dark Mode webinar!

Email Accessibility and Dark Mode

Prior to this project, Accessibility and Dark Mode had two separate meanings for me. Not anymore. Technically email is still in its wild west phase where people try all types of things. I feel it’s good to push the limits of email to see what it can do, but I also think Accessibility is on the forefront of creating a standard that it needs to grow from.

So, if you have an accessible email in Light Mode, and it gets sent to an email client that has Dark Mode enabled, is the email still accessible? That’s an excellent question!

Color Theory (Basic)

Complementary colors are contrasting colors. Colors that are right across from each other on a basic color wheel have maximum contrast.

Color Wheel

Color Contrast Ratio

When it comes to making an email accessible, there are many factors, but for the purpose of this blog I’m just going to be referencing color contrast ratio.

(If you haven’t checked it out yet Email on Acid has an extensive blog on Accessibility in email here.)

Color contrast ratio is a property of a digital display system defined as the ratio of the luminance of the brightest color (white) to that of the darkest color (black). A high contrast ratio is a desired aspect of any display. With the world having at least 2.2 billion (Oct. 2019) people experiencing vision impairment it’s important your email has a good color contrast ratio for readability of your content. Contrast ratios can range from 1 to 21 (commonly written 1:1 to 21:1). According to Web Content Accessibility Guidelines (WCAG) level AA requires a contrast ratio of 4.5:1 for normal text size.

Here are some examples of good and bad color contrast ratio’s

Color Contrast Ratio Chart for Accessibility

Dark Mode Recap

In this experiment I used Outlook 2019 on Mac and its algorithm for Dark Mode. Also, Dark Mode will completely invert, partially invert, or do nothing to your email. You read that right some email clients like Gmail web mail just change the user interface to a dark background with light text, and their mobile app changes the colors of the email. What I wouldn’t do to get my hands on the algorithm for that Gmail app!

The Process

Email on Acid has a product in their SaaS bundle called Campaign Precheck. It’s a tool for checking accessibility in your email, and there is a step in it that checks the color contrast ratio.

I used Campaign Precheck to verify my findings about Accessibility and Dark Mode.

Note: In my experiment the email had to be accessible in Light Mode, and I couldn’t find any emails that were accessible. I had to make them accessible for this experiment.

The Steps

1) I would take an email, check its Accessibility in Campaign Precheck and send it to my Outlook 2019 on Mac client that has Dark Mode applied. (The email had to be accessible in Light Mode)

2) I would take a screenshot of the email.

3) Use an eye dropper from Adobe Photoshop to get the changed colors.

4) Completely redo the email with the changed colors.

5) Lastly, I would run it through Campaign Precheck to check if the color contrast ratio is accessible.

In this example the color contrast ratio is accessible

What If the Email Wasn’t Accessible After Color Change

There were some instances where the emails color contrast ratio wasn’t accessible. There were times when after I changed the colors in the HTML email it would fail the color contrast check in Campaign Precheck. This asked the question can I change the failed colors with code in the CSS. The answer was yes.

Meta Tags and Media Queries

I will show all of this together, but for a use case scenario I wanted to show these separate. The meta tags I used were these. If you put them between the <head></head> tags. They will recognize if your device has Dark Mode or Light Mode enabled and treat the email accordingly.

<meta name="color-scheme" content="light dark">

<meta name="supported-color-schemes" content="light dark">

Before the media query in the CSS of the email add this as well.

:root {
color-scheme: light dark;
supported-color-schemes: light dark;

The :root selector targets the highest-level parent: html, and it also helps target if the device has Dark Mode or Light Mode enabled. A little more on the :root selector here.

The media query I used was the @media (prefers-color-scheme: dark)

@media (prefers-color-scheme: dark ) {
           color:#858585 !important;
           color:#5d715d !important;

Yes, I really used these classes.

Everything Together HTML CoDe Screenshot

Example After Added CSS

HTML Code Accessible versus not Accessible

Color Contrast Ratio Image

By adding the classes .darkModeHack1 to View in Browser and .darkModehack to the No.107 text I was able to change the inaccessible colors when the email turned to Dark Mode using the meta tags and the @media (prefers-color-scheme:dark).

Another Example

This one uses the same process but different CSS. A logo missing in an email makes it not accessible as well. Sometimes companies will have a white background, and a black logo that is has a transparent background. If the email turns to Dark Mode, it will look like the logo disappeared from the email like in this example. Not really the best render review, but at least the logo is showing.

Screenshot of Squarespace HTML code

With this fix I put a class on the background color of the logo, and used – background: linear-gradient(#ffffff,#ffffff);

Example After Added CSS Part 2

HTML code with Meta tags

You can see I’m still using the Meta Tags, Root Selector, and the (prefers-color-scheme:dark) media query. The only difference is I’m using a class that has the linear-gradient function to change the background color of the logo.

Here’s more information about the linear-gradient () CSS function here.

What Email Clients Support @media (prefers-color-scheme:dark)

Mobile Apps.
– Apple Mail (iPhone + iPad)
Outlook App (iOS)

Desktop Clients
– Apple Mail
– Outlook 2019 (Mac OS)

Web Clients
– Outlook.com

You can see there is quite a handful of email clients you can check to and make sure your email stays accessible in Dark Mode. And if you’re curious, here is some documentation into a deeper look at what clients support it.


The truth is I had a difficult time trying to find a Light Mode email that was accessible to begin with for this experiment. Even when it was accessible, verified by Campaign Precheck, some emails still turned out not being accessible via color contrast ratio transitioning to Dark Mode.

I feel with this experiment it’s good to know if you have an email that has an accessible color contrast ratio in Light Mode and when it transitions to Dark Mode for consistency for individuals with visual impairments.

Get the Dark Mode Pixel Hack

View email developer Ed Ball’s step-by-step instructions for using analytics tracking pixels to find out how much of your list is opening emails in dark mode.

email developers code in dark mode
Simplify the Email QA Process and Deliver Perfection

What’s the best way to run through your pre-send checklist? With Email on Acid’s Campaign Precheck, we’ve simplified the process and set everything up for you. Use it to double-check your content, optimize for deliverability, ensure accessibility, and preview how campaigns look on the most popular clients and devices. All before you hit send!

Start a Free Trial

Author: The Email on Acid Team

The Email on Acid content team is made up of digital marketers, content creators, and straight-up email geeks.

Connect with us on LinkedIn, follow us on Facebook, and tweet at @EmailonAcid on Twitter for more sweet stuff and great convos on email marketing.

Author: The Email on Acid Team

The Email on Acid content team is made up of digital marketers, content creators, and straight-up email geeks.

Connect with us on LinkedIn, follow us on Facebook, and tweet at @EmailonAcid on Twitter for more sweet stuff and great convos on email marketing.

6 thoughts on “Accessibility and Dark Mode: The Latest Buzz Words”

  1. I really dislike dark mode. It would be fine if all mail clients followed the same rules and if you could target every one of them to fix issues. But as usual Microsoft and Google are being a pain in the ass and causing problems.

    Dark mode is fine if you have simple emails with just some text and images, but the moment you go even slightly more fancy with background images and buttons it becomes a mess that can’t be fixed in Outlook on Windows and the Gmail app.

    I really hope at least Gmail will join the list of email clients we can target soon.

  2. Sooner or later, darkmode will be a default part of any email. Some ab-testing darkmode vs no darkmode in the emails would be much more helpful. Actually, I thought that I’ll find this info in this article 🙂

  3. I’m having SO much trouble with dark mode. If I use !important on my dark mode targeting css it shows up in light mode. If I don’t do that, it shows up in neither. Any advice?

Leave a Reply

Your email address will not be published. Required fields are marked *