How Marketers are Creating Emails to be ‘Dark Mode Ready’

By Lauren Gentile, Vice President of Creative at Epsilon | EEC Leadership

Ensuring all email recipients can open, view and read an email in its entirety is a top goal of mine. In fact, email accessibility is a topic in which I’m very passionate about and I’ll be speaking about in an upcoming webinar with the EEC next month. While Dark Mode is not technically an accessibility consideration, it’s related and is a big challenge for email marketers. Let’s further explore.

Dark Mode is a new setting option available for websites and apps. It provides a darker color palette, enabling more desirable working conditions at night or in low-light environments. Dark Mode can be set as the default interface style or, depending on the time of day, can automatically switch modes between light and dark. People with low vision, dyslexia and color blindness frequently choose to view their screens in inverted color patterns or specific background colors. And Dark Mode is becoming more and more common with mobile apps. Frontrunners like Apple Mail, Gmail and Outlook apps lead the way while other third-party email clients have varying support.

With Dark Mode turned on, users receive a darker version of the email, website or app they are viewing. This darker experience is usually set by algorithms that determine the background and foreground colors. Brightly colored email backgrounds can produce a negative experience for end users viewing in Dark Mode as content might be difficult to read. And emails that switch from dark to light can lead to eye fatigue and further result in an unsatisfactory reading experience. Without careful planning at the email creation process, Dark Mode emails can render differently and result in less than desirable outcomes when viewed in the email clients that support it.

For example, look at the email promotion below. To the left, in a standard viewing experience, the bonus reward creative renders as expected. In the middle, when viewed in Dark Mode, the white background of the slice does not match the design. However, by making some creative adjustments, the updated Dark Mode version (to the right) appears more appealing and an easy enhancement could include making the gray text white.

With the adjustments of the Dark Mode feature, it does make the email more accessible for each individual’s viewing needs and preferences. And as marketers, it’s important to understand the impact Dark Mode has on your creative so you can put a plan in place to ensure you’re achieving Dark Mode success.

Here are some tips to consider:

  • Create a standardized system: While it’s difficult to code for every possible device, operating system and personal preference or setting, what marketers do have the ability to do is to create more standardized design systems along with a flexible code base to accommodate for these specific types of user preferences. Consider static elements in your templates like your brand logo and header images to ensure they render successfully in dark mode. Take time to evaluate your templates in the Dark Mode setting so you can accommodate any necessary coding enhancements for the Dark Mode feature.
  • Choose your images carefully: With the Dark Mode setting, the color palette shifts, displaying content in high contrast by using dark background and light foreground colors while minimizing blue lights to enhance readability and reduce eyestrain. At times, this can result in HTML email rendering issues due to differently defined color components. For this reason, marketers are using transparent images to allow for background color changes to appear seamless while maintaining the integrity of the design. Additionally, to combat black content displaying on a black background, you can improve readability by adding a white outline around dark text or icons. Knowing how and why these creative adjustments need to be made within the Dark Mode setting is critical for rendering success.
  • Implement a testing team: It’s important to understand how dark mode will affect your brand’s emails. You can leverage tools like Litmus Email Previews to test Dark Mode across devices, or you can use your own device to ensure your creative is rendering as desired. And remember to keep the lines of communication open. Share your learnings with members across your organization to educate them on Dark Mode, what’s new, what’s changed, how it affects their role, and so on.

As you continue to plan for and evaluate how you can best incorporate Dark Mode into your email campaigns, please keep in mind there will be instances where existing creative designs prohibit perfect rendering when your email is viewed in Dark Mode. There might also be occurrences when the design cannot be further adjusted in development and must be fixed by changing creative assets. Nonetheless, as Dark Mode becomes more standardized, specific targeting and solutions will likely become more readily available. For now, there isn’t necessarily a perfect way to design for Dark Mode—marketers must design around it to provide ideal results.

So ask yourself …. Are the emails we send providing the most optimal viewing experience even when read in Dark Mode? If the answer is no, consider making some adjustments. And remember, email marketing is a journey.

If you’d like to continue the conversation, please reach out to me on LinkedIn or contact EEC staff with your take on Dark Mode and accessibility in email marketin