Dark mode has come to email clients. I first noticed it in my iPhone on Outlook. It's a feature I have been wanting to use in my phone since I first saw it in macOS and I've been using it for a long time in my Linux devices.
My first impression was … unpleasant. Lots of emails didn't read correctly, social icons and other media were optimized for light backgrounds, so they were hard to see or completely invisible. Text emails weren't affected but HTML emails with images and lots of CSS are a different story. So, in a matter of a couple years, this new trend is now a new feature we need to optimize for. As a user preference, we need to prepare content for all options available for them.
Everything comes down to accessibility, making our content visible and usable for all sizes, internet connections, operating systems and now color themes. And this is not only true for email but for everything on the Web. It helps with SEO and User Experience, since accessibility tries to make it easy for everyone to use your site, it improves their experience and with it your rankings.
The WCAG 2.0 standard along with the prefers-color-scheme CSS media query will help us to compose a design that can work with both light and dark themes. Of course, it will require a bit more work, but a good workflow setup for these can reduce the amount of effort if we follow a design system that provides solutions for these.
I'm not sure if email providers like MailChimp, HubSpot, etc. will provide tools that can help define good color contrast inside their HTML editors or visualize emails in both dark and light backgrounds, but in the near future this could be a must-have.
With new trends and new technologies, the web diversifies the way to consume it, and it's our responsibility to create it with inclusion and accessibility in mind and make sure that users can easily use it. For companies, this mean that you will have a good, solid, easy platform to do business with users who utilize these technologies. It's a win-win.
Here are a few tools we can use to test accessible color contrast:
If you are not thinking about these things with your emails, you are going to frustrate as much as 35% of your potential email recipients. Besides creating the right experience as a good thing to do, you simply can't ignore numbers that large.
