Type E:

From Beyond the Envelope™

The colour issue — 3.

In 2016, Microsoft introduced its ‘Dark Theme’ or ‘Dark Mode’ to desktop on Windows 10. Two years later, in 2018, Apple introduced its ‘Dark Mode’ to desktop on macOS Mojave. One year later, in 2019, Apple and Android introduced their ‘Dark Modes’ to mobile on iOS 13 and Android 10, respectively. 2019 was also the year a new CSS property, ‘prefers-color-scheme’, was introduced!

All three’s intent, through their introduction of ‘Dark Mode’ (as the name suggests), was to offer their users a way of turning their screens dark and their content light to make reading more comfortable for them in low-light environments.

However, for many, ‘Dark Theme’ or ‘Dark Mode’ has become their theme or mode of choice when reading emails in all environments – low-light or bright-light, even when ‘Light Mode’ (as it’s now known) is the default.

What they choose when offered ‘Dark Mode’ enables us (using ‘prefers-color-scheme’) to deliver the experience they desire, something we’re rarely able to do so explicitly and something we should embrace.

Sadly (if my own inbox is anything to go by), many emails aren’t optimised for ‘Dark Mode’, and evidently, they’re often not even considered during the creative or coding process.

In this issue, I’ll look at three reasons why you should consider ‘Dark Mode’ and why you should implement it into your email creative and coding process.

Respecting your recipient’s choice

Like it or not, your recipients can turn on ‘Light Mode’ or turn on ‘Dark Mode’ at will. It’s their choice. And, having chosen to do so, they expect their experience on all their software to reflect and respect that choice.

However, their experience of ‘Dark Mode’ will depend on whether the software they’re using and the content they’re viewing within that software supports it.

When it comes to viewing email content in email software – email clients, webmail clients, and apps – some do support it, some don’t support it, and some only partially support it!

Even if they do support it, the emails within them must have been created and coded to take advantage of ‘Dark Mode’ and how it handles their colours.

It takes time, effort, and knowledge to create and code ‘Dark Mode’ emails. However, it’s worth it because when you deliver a ‘Dark Mode’ email, you’re respecting your recipient’s choice.

Respecting accessibility

Some recipients prefer to turn on ‘Dark Mode’ to make their emails more accessible. As such, you must respect their preference and endeavour to deliver your emails in ‘Dark Mode’ and ‘Light Mode’.

Accessibility is the reason why you should never ignore ‘Dark Mode’, as many have done (judging by my inbox), and brush it off as a ‘fancy feature’. No. You should embrace it.

From an accessibility point of view, its colour contrast that suffers the most when ‘Dark Mode’ is turned on. So, you must check your colour contrast on text and images when you’re testing your emails in ‘Dark Mode’.

In addition to the content you can see, you also need to consider the content you can’t see, such as alternative text, as this can ‘disappear’ when ‘Dark Mode’ is turned on.

Ensuring you’re respecting your recipient’s preference and ensuring your colours contrast is respecting accessibility.

Respecting your brands colour palette

As I wrote in Type E: The colour issue — 1, brands really care about colour and dedicate pages and pages of their brand guidelines to it. They define their colours in their primary, secondary and sometimes tertiary colour palettes and outline how to use them.

They don’t particularly like it when the colours they really care about and the colour palettes they’ve carefully crafted are changed, which can happen when their emails are viewed by their recipients in ‘Dark Mode’.

This loss of control over colour can be very disconcerting, as brands find their branding suddenly unrecognisable when ‘Dark Mode’ is turned on and their brand colours are ‘turned off’!

However, brands can manage how much ‘Dark Mode’ impacts their emails to a lesser or greater extent, depending on what email clients, webmail clients and apps their recipients use.

On Android devices, it’s a case of ‘managing’ ‘Dark Mode’ as the colours rendered are determined by the operating system’s interpretation of what ‘Dark Mode’ should look like.

On Apple devices, it’s a case of defining ‘Dark Mode’ as the colours rendered can be determined using the ‘prefers-color-scheme’ CSS property within a @media query to specify a ‘Dark Mode’ colour palette!

In either case, you should consider how ‘Dark Mode’ impacts your brand’s colour palette as defined in your brand guidelines and, where possible, include a ‘Dark Mode’ colour palette within it. Doing so is respecting your brand’s colour palette.

Conclusion

In summary, this is why you should consider ‘Dark Mode’ and what you should consider when implementing it:

1. Respect recipient choice. There may be multiple reasons why your recipients choose to turn on ‘Dark Mode’. It could be that they’re opening your emails in low-light conditions, and ‘Dark Mode’ makes it more comfortable for them to read (the reason for its existence). It could be that they prefer to see white text on a black background as it makes it easier for them to read and more accessible. Or, it could simply be that they prefer ‘Dark Mode’ to ‘Light Mode’! Whatever the reason, respect your recipient’s choice.
2. Respect your brand’s colour palette. A lot of time, effort, and agreement goes into defining your brand’s colour palette (trust me, I know!). As such, it’s essential to understand how ‘Dark Mode’ impacts your brand’s colour palette when your recipients turn it on. Rather than resist ‘Dark Mode’, embrace it and consider it part of your palette. Where you can define it (e.g. iOS, iPadOS and macOS), include a ‘Dark Mode’ section in your brand guidelines, as I illustrated in Type E: The colour issue — 1. Where you can’t define it (e.g. Android), understand how it’s impacting your colour palette, and ensure your emails remain accessible with the colours within it, testing their colour contrast with a tool like WebAIMs Contrast Checker.
3. Review your recipient’s email and website experience. Review your recipient’s email and website experience to ensure that when they leave your email in ‘Dark Mode’ and arrive at your landing page in ‘Dark Mode’, their experience is consistent. If it isn’t, use email analytics to understand the proportion of your recipients who are using ‘Dark Mode’ and make a clear case for ensuring landing pages are also optimised for ‘Dark Mode’ to stakeholders.

Made with Envelope Developer™

Powered with