Dark Mode vs light mode emails

Accessibility and Dark Mode: The Latest Buzz Words

0

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 with some interesting results.

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 ) {
     .darkModeHack1{
           color:#858585 !important;
     }
     .darkModeHack{
           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
– HEY

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.

Conclusion

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.

If you don’t QA, test and preview your email in
Campaign Precheck, are you really sending an email?

We always recommend testing every email every time. But why stop there when you can make so many other strategic and tactical enhancements? Things like accessible code, perfect inbox display, fast-loading images all play a critical role in an email’s ROI. Campaign Precheck is end-to-end email QA, testing AND previews in one seamless workflow. Optimize content and your code, test for deliverability and preview how it will look for subscribers to save time and improve performance. Sign up for a free trial and start sending better email.

Start a Free Trial

Author: Ed Ball

Hailing from the global marketing agency world, Ed has developed emails for the United States Military, big Pharma, and Fortune 500 companies. Now an in-house email developer at Email on Acid, he pushes the envelope daily, exploring the true extent of what's possible in email. During his down time, you can find Ed jamming on his guitar.

Author: Ed Ball

Hailing from the global marketing agency world, Ed has developed emails for the United States Military, big Pharma, and Fortune 500 companies. Now an in-house email developer at Email on Acid, he pushes the envelope daily, exploring the true extent of what's possible in email. During his down time, you can find Ed jamming on his guitar.

Leave a Reply

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