Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps
Most developers are very familiar with dark mode and its challenges in email. Those of us who stare at code all day appreciate the aesthetic and believe it gives our eyes a little break. However, personal preference aside, there is still a lot of debate about dark mode and email accessibility.
On many devices and platforms, you can find dark mode settings under Accessibility. However, does this mean that anything designed with darker settings will be more accessible? What about email in dark mode? Will emails designed for light mode still be accessible if an email client inverts the colors?
Let's explore how dark mode impacts email accessibility and how we can design emails that ensure an accessible experience regardless of whether a subscriber uses light mode or dark mode.
Are emails accessible in dark mode?
There is no easy answer to this question. From the email client doing the rendering to the device used to the text and background colors in an email, there are many things to consider.
The only truth here is that accessibility is based on the needs and preferences of the individual and (especially when it comes to disability) each individual's needs are different.
According to the Nielsen Norman Group, people with cataracts and related conditions may prefer reading text in dark mode. This is because a dark screen environment causes the viewer's pupils to dilate and let in more light. The same research also shows that long-term reading in bright mode may be linked to myopia (nearsightedness).
However, the Bureau of Internet Accessibility (BOIA) reports that people with conditions such as dyslexia (an estimated 5-10% of the US population) and astigmatism may have difficulty reading text in dark mode. According to UX Collective, light text on a dark background can create a halo effect that affects readability for some people.
For more information, check out the video below, which explores the history of dark mode and whether it's actually better for your eyes.
The bottom line is that dark mode may improve accessibility for some subscribers, but makes things worse for others. We must assume that people choose the mode that best suits their needs. And email developers should strive to provide the best possible experience to as many subscribers as possible.
Dark mode accessibility for email developers
In dark mode, various email clients either completely invert your emails, partially invert them, or do nothing at all. This poses a real problem for email marketers who have no idea how their emails appear in different inboxes.
If an email client automatically inverts the colors for dark mode, it can cause color contrast issues that make text difficult to read and compromise accessibility as defined by the Web Content Accessibility Guidelines (WCAG). Email on Acid tested this in 2019 and found that (sometimes) an email designed in light mode is accessible, but does not remain so after a color inversion for dark mode.
Meta tags and media queries
If your email campaigns fail the color contrast ratio accessibility checks, you can find a quick fix by simply adding a few lines of code to the CSS. Essentially, this fix tells the client to display a specific version of an email (or specific items) depending on the mode used.
The first step is to place meta tags (see below) between the
Tags your code. You can use these tags to find out whether a device is in dark or light mode and treat the email accordingly.
We then add the following code before the media query in the CSS of the email.
:root { color scheme: light dark; Supported color schemes: light dark; }
The :root selector targets the highest level parent element: HTML, and also helps target when the device is in dark mode or light mode.
The media query we used in this example was @media (preferred color scheme: dark)
@media (prefers-color-scheme: dark) { .browser-link{ color:#858585 !important; } .browser-link{ color:#5d715d !important; } }
Putting everything together
This is what this code looks like in an actual email.
Click for a larger image
Example after adding CSS
Check out the screenshot of an email we experimented with in 2020.
By adding the .browser-link classes to the View in Browser link at the top of the email and .edition to the No.107 text, we were able to change the inaccessible colors in dark mode using the meta tags and the @media (prefers-color-scheme:dark).
Click for a larger image
Email accessibility beyond dark mode
Dark mode is just one element of email marketing that can impact the accessibility of your campaigns. The bottom line is that we need to create the best possible email experience whenever we can.
We've already covered email accessibility in depth on this blog, and we remain committed to the task. Accessibility should be a priority alongside any other checks you perform on your email campaigns before sending, including deliverability issues, spelling and grammatical errors, broken links and images, and email client rendering. Email on Acid's pre-deployment campaign checklist meets all of these criteria to ensure your email campaigns are fully optimized and achieve your goals.
Check for dark mode and accessibility issues
The Acid Pre-Deployment Email Campaign Checklist should be your first stop to troubleshoot email accessibility issues in dark mode. The pre-deployment service checks your email for color contrast ratio issues across over 90 email clients and devices, allowing you to make changes before you hit the send button.
The only way to check the negative impact of poor accessibility on your email campaigns is to actively test your campaigns in dark mode for all available email clients. You could try doing this manually (impossible) or use accessibility testing features that check your email for accessibility across multiple clients and devices.
To learn more about how dark mode is impacting the world of email marketing, check out Pathwire's dark mode for email survey.
Author: The Email on Acid Team
Email on Acid's content team is made up of digital marketers, content creators, and real email geeks. Connect with us on LinkedIn, follow us on Facebook, and tweet @EmailonAcid on Twitter for more great email marketing news and great convos.
Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps
