Dark Mode: Critical Considerations for Email Marketing

Originally released in November of 2019 with the iOS 13 update, dark mode (which enables a darker color palette for your screen displays) has quickly become a preferred viewing method for many online users. While the switch in screen brightness can help reduce blue light exposure and eye strain, it has created a unique challenge for digital designers.

Because different platforms, apps, and operating systems render dark mode differently, designing for dark mode takes additional considerations for designers to ensure an email looks consistent across all possible experiences. Trying to accommodate a design for dark mode can also pose accessibility challenges.

Dark Mode Causes Legibility and Design Issues

Think of dark mode to mean “inverted.” When you have elements of live text, or PNG images, dark mode will invert or distort the background color of that specific element. For example, if you have black text on a white background, the background will become black, and the text will switch to white on dark mode.

This is especially problematic when it comes to PNGs. PNGs are saved on a transparent background, meaning they will inherit the background color of whatever is behind them.

Many brands will upload their logo or social icons as a PNG file in an email, which usually doesn’t turn out well on dark mode:

This example from Brooks Running highlights the contrast issue around the social icons between light and dark modes. Because the icons are uploaded as PNGs, they take on the updated background in dark mode, making it difficult to see them altogether.

One component of digital accessibility is contrast. When the asset inside a PNG is black (and the original design ensures it appears on a white background), there’s not enough contrast to make it easy to see the original asset. It’s therefore inaccessible to viewers with visual disabilities.

While accessibility can be a huge issue for PNGs viewed on dark mode, emails that aren’t optimized for dark mode can also detract from the overall design and aesthetics of your email.

Most email designs are designed with light mode in mind, and it can be a real shock to see how your email design looks when viewed on dark mode. Designs that aren’t optimized for both light and dark modes often look disjointed, broken, or even spammy.

A Burberry email viewed on light and dark modes. While the dark mode design is still mostly legible, it doesn’t have the same light and airy minimalist feel the original light mode design has.

Overall, when dark mode distorts the original intentions of your email design, it doesn’t feel like a consistent brand experience.

The Only Design Guarantee on Dark Mode is to Use JPGs

The only way to ensure all of your assets are visible and look as intended on dark mode is to use JPGs for all graphics and text in your email. But this poses an accessibility issue in-and-of itself.

Font Size Doesn’t Scale

First, the font doesn’t scale responsively between mobile and desktop when it sits within an image. Some email service providers (ESPs) like Klaviyo enable you to set mobile text styles when using live text, so you can set font sizes for both the desktop and mobile experiences.

This ensures that your text is legible for mobile readers.

When you upload an image with text, it scales down within the image on mobile. If your font size is too small, it becomes difficult to read on mobile.

Screen Readers Rely on Alt Text for Images

Second, screen readers rely on alt text to describe what’s in an image. If you don’t use live text for the text in your email, all of that has to fit within the alt text of the images in order for it to be accessible to screen readers.

And if you upload your email as one single image?

That’s a lot of alt text to remember to fill in.

The end result is a sort of disjointed experience at the hands of a screen reader.

Other Flaws of Using Images

While remembering to include alt text and making the font big enough seem like easy things to overcome in order to use images in your email, using images for the entirety of your email prevents you from being able to add in personalized content.

All personalized content is typically built within a given ESPs’ live modules. If you wanted to add in name personalization, or pull in specific details about a person’s past purchases or loyalty account, all of that is added with live text or dynamic product modules within an email.

And images won’t allow you to do that.

An example of Resy using personalization tactics that wouldn’t be possible if the entire email was uploaded as JPG images.

So What’s The Solution?

There is no one, easy way to design for dark mode.

The pros and cons (as we see them) of using live text vs. all image emails as it relates to responsive and dark mode designs.

As we mentioned above, using a combination of live elements, PNGs, or other images can present accessibility issues and create a disjointed email experience on dark mode.

But uploading image-only emails also presents accessibility and usability challenges.

What it comes down to is what matters to your brand when sending emails.

If design consistency is important, you may choose to forgo any personalization tactics within the email template and opt for an email that’s built entirely with images.

If personalization and responsive design are bigger priorities, you may accept that your email design might look slightly different on dark mode.

We tend to opt for the latter, as including personalization tactics, dynamic product recommendations, and ensuring the responsiveness of our designs creates a more accessible, enjoyable experience.

Regardless of which approach you choose, it’s essential to test your emails (whether on your own phone, or using a program like Email On Acid), to ensure they load properly and look on-brand across most email clients, devices, operating systems, and display settings.