In September 2019, Apple brought out iOS 13 with a dark mode capability and lots of people symbolically shouted “lights out” when it came to looking at screens on their mobile devices and desktops. And although dark mode can be traced back to 1948 when the first programmable computer was used with a CRT-powered screen, a key reason it made sense then continues to make sense today. Dark mode is easier on the eyes, especially for lengthy viewing. In fact, developers—known to spend hours looking at displays as they work on code—overwhelmingly prefer dark mode.
Beyond the practical, the rise in dark mode’s popularity is fueled by young people’s preference for it. Simply put, they find it cool. For many, regardless of age, dark mode is more aesthetically pleasing. A large portion of people feel it makes colors pop and helps segment elements on a screen, helping them see what’s most important.
Although dark mode is cool and suggests the email’s sender cares about subscribers’ vision, it is hard to design for. Done wrong, it can impact deliverability. Many email clients don’t automatically optimize images for dark mode. Unoptimized content tends to result in messy-looking, hard-to-read emails, and most subscribers aren’t going to spend time trying to read those emails. Most likely, they’ll ignore or delete them or mark them as spam. As an email marketer, that reaction will have a negative impact on the deliverability of emails you send subscribers and, by extension, your brand.
If you make the effort to have your emails look their best in dark mode, however, recipients are more likely to read and positively engage with them. Unfortunately, that’s not so easy to accomplished. There are more problems besides figuring out which email clients your subscribers use. By analyzing thousands of emails designed for dark mode, Stensul was able to determine the five most perplexing dark mode design problems:
- Paying too little attention to color palette contrast shifts between light and dark backgrounds
- Overlooking when and how to use transparent images
- Not factoring in text readability on changed backgrounds
- Failing to consider subscribers’ email clients
- Discounting the importance of presend testing
Problem 1: Paying too little attention to color palette contrast shifts between light and dark backgrounds
There are levels of dark mode, referred to as No, Partial, or Full inversions that reflect the degree of color inversion or change. This problem occurs when you don’t look carefully at all the colors your email design uses. Simply put, if you’re “blind” to any aspect of the color palette, your beautiful design can look horrible in dark mode.
How to solve this problem
Start with background colors. Does the email use any non-white colors in the background? How dark are they? How do they look in a full inversion? Darker colors might invert weirdly for certain email clients. Then conduct the same evaluation for other color elements.
Make sure you choose colors that ensure your email content is readable in dark mode. To provide a good email experience, avoid blinding readers by forcing your emails to display light backgrounds.
As of this post, email clients use one of these four approaches to converting email colors to dark mode:
- Converting transparent backgrounds to dark colors
- Automatically inverted colors for all non-dark backgrounds
- Inverted text colors
- No automatic changes
Take the time to understand these approaches because they will influence color selection and use within an email design. To get you started, we have created a free Dark Mode Color Checker tool.
Problem 2: Overlooking when and how to use transparent images
JPG images with white backgrounds will stay how they are in dark mode. It’s not a good look and can also lead to invisible sections if the email uses transparent images with text.
Nearly 30% of companies use black or gray-scale colors in their logos. As sophisticated a look as that might be, a black logo is the least dark mode‒friendly, meaning it might go unseen and make it extremely difficult for the subscriber to know who sent the email.
How to solve this problem
Make sure each image section you build spans the full width of the email and fill in any potential gaps with additional white image pieces. This tactic will keep the email’s visual consistency across both light and dark color schemes. Also, avoid dark grey or white transparent text images. These do not translate well when converted to dark backgrounds. Instead, render out the full section with the colored background as one complete image.
This problem typically occurs with PNG images, which have transparent backgrounds, allowing them to take on the color of any image behind them. And because most logos are a color other than white, they tend to work well against white backgrounds, but not all work for dark backgrounds.
Problem 3: Not factoring in text readability on changed backgrounds
Subscribers can’t read the words when black text in your email message is against a light or white background. It can also happen if you’ve placed text over an image that’s not transparent. In dark mode, the image often covers over the text, making it unreadable.
How to solve this problem
To prevent black text turning unreadable in dark mode, highlight the text in white so it can be seen when the background is changed to black. Beyond that, consider:
- Not putting all the text in images
- Reducing the image-to-text ratio
- Avoiding pure white text on pure black backgrounds
Problem 4: Failing to consider subscribers’ email clients
Your subscribers are probably using one of the three main clients—Apple Mail, Gmail, or Outlook. The permutations that happen as a result of the mix of device type, operating system version, and client release means the potential for emails not to appear as you hope they would is high. Appearance issues include odd color displays, unreadable logos, social media icons, and text—plus, some emails simply won’t load.
How to solve this problem
Until there’s what amounts to a universal dark mode method that works with all email clients, the responsibility rests with you to understand as much as you can about the email clients your subscribers use and how as best as humanly possible.
The state of email clients and dark mode support is very much in a state of flux, a result of the growing popularity of dark mode.
Problem 5: Discounting the importance of presend testing
Even if you assess the make-up of email client usage among your subscribers, assuming your email for dark mode will appear as you want when subscribers open it is worse than foolhardy. If you don’t test a dark mode email before uploading it to your ESP, the effort will fail on multiple levels—from the standard email performance metrics to customer experience measures, and more.
Not testing dark mode emails routinely before sending them is the marketing equivalent of dereliction of duty. And testing one client in dark mode is not sufficient.
How solve this problem
Test your dark mode emails in as many ways as possible to see how they render on the three major email platforms—Apple Mail, Gmail, and Outlook—at the very least. Do so for every email you send that employs a different design from previous emails.
There are three ways to handle this presend examination:
- Send test emails to each client
- Use a testing tool
- Create the emails in an email creation platform where all factors associated with correct dark mode rendering are preloaded
The notion about coming over to the dark side—when it comes to email—is far from a joke. Dark mode has been adopted by many platforms and embraced by a growing number of subscribers. It’s here to stay. Your job is to figure out what you need to do to make your brand and your email marketing efforts as strong as possible in dark mode.
To learn more about designing emails for Dark Mode, download The five most perplexing dark mode email design problems ‒ and how to solve them. To learn more about Stensul and its agile Email Creation Platform, click here.
