Email Accessibility in Dark Mode: Coding Hints

Email Accessibility in Dark Mode: Coding Hints

See the source image

For most developers, email’s dark mode is a well-known issue. Many coders appreciate the aesthetic and believe it gives our eyes a break. Putting aside personal preferences, there is still much debate about dark mode and email accessibility.

Many devices and platforms have “Accessibility” settings for dark mode, but does that mean anything designed with darker settings is more accessible? What about blackmail? Will emails designed for light mode still work when colors are inverted?

Let’s look at how dark mode affects email accessibility and how we can design emails that are accessible in light or dark mode.

Are dark mode emails accessible?

This is a difficult question. There are many factors to consider, ranging from the email client rendering to the device used to the text and background colors used.

Everyone’s needs are different, especially when it comes to disabilities.

Blind people may prefer reading texts in dark mode, according to Nielsen Norman Group. Dark screens cause viewers’ pupils to dilate, allowing more light in. The same study suggests that long-term light reading may cause myopia (short-sightedness).

The Bureau of Internet Accessibility (BOIA) warns that people with dyslexia (5-10% of the US population) and astigmatism may struggle to read text in dark mode. For some, the halo effect of light text on dark background reduces readability, according to UX Collective.

Access to dark mode for email developers

In dark mode, email clients completely invert, partially invert, or do nothing. This causes issues for email marketers who don’t know how their emails will look in different mailboxes.

This may cause color contrast issues, making text difficult to read and impacting accessibility as defined by the Web Content Accessibility Guidelines (WCAG). In 2019, Email on Acid discovered that while an email designed in light mode is accessible, it is not always so after a color inversion for dark mode.

Meta tags and media queries

If your email campaigns fail the color contrast ratio accessibility test, a few lines of CSS code can quickly fix the problem. This fix tells the client to show a different version of an email (or certain elements) depending on the mode.

The first step is to insert meta tags (shown below) between your code’s head tags. To determine a device’s dark or light mode, these tags will be used.

<meta name=”color-scheme” content=”light dark”>

 <meta name=”supported-color-schemes” content=”light dark”>

In the email’s CSS, place the following code before the media query.

:root {

 color-scheme: light dark;

 supported-color-schemes: light dark;

 }

The :root selector helps target the device’s dark mode or light mode.

The @media query was used in this example (prefers-color-scheme: dark)

@media (prefers-color-scheme: dark ) {

 .browser-link{

            color:#858585 !important;

      }

 .browser-link{

            color:#5d715d !important;

      }

 }

Email accessibility beyond dark mode

Email marketing features like dark mode can impact your campaigns’ accessibility. The bottom line is that we must always build the best email experience.

We’ve previously discussed email accessibility on this blog, and we’ll continue to do so. Accessibility should be checked alongside deliverability issues, spelling and grammar errors, broken links and images, and email client rendering. The pre-deployment campaign checklist from Email on Acid ensures that your email campaigns are fully optimized and meet your goals.

Examine dark mode and accessibility

The pre-deployment campaign checklist from Email on Acid should help you troubleshoot any issues with email accessibility in dark mode. The pre-deployment service checks your emails for color contrast ratio issues across 90+ email clients and devices, allowing you to make changes before sending.

Activate dark mode testing across all email clients to check the negative impact of poor accessibility on your email campaigns. You can either do this manually (impossible) or use accessibility testing tools to check your emails across multiple clients and devices.

Leave a Reply