Accessibility inspired: Dark mode

As part of our journey to embrace accessibility in design, we’re sharing a series of insights that document our process and learning. In our last post, we talked about how to use motion and animation with accessibility in mind. In this article, we're going to talk about a design trend that has gained a lot of popularity over the past couple of years: dark mode.

We love that dark mode gives users an option around how they want to experience your site. When done right, dark mode can enhance accessibility. It’s not as easy as it seems, though. Dark mode requires an intentional approach to design and a solid understanding of accessibility best practices. In this post, we’ll share our tips for great dark mode design.

What is dark mode?

Dark mode is the colour scheme of any interface that displays bright text and interface elements on top of a darker background. It’s designed to supplement the default light mode. Dark mode isn’t as easy as flipping a switch from white to black. When you’re designing for dark mode, you’re creating two versions of the same design. That means double the work.

How long has dark mode been around?

To truly understand dark mode, we need to take a step back and see how this all started. Dark mode actually predates light mode by a couple of decades. For the very first computer screens, dark mode was the default. Back then, monochrome CRT monitors contained phosphorus, which made them appear dark. They could only display a single colour, defined by the type of phosphorus used, which at the time was most commonly green (flashbacks of The Matrix, anyone?).

Light mode: a more familiar experience

In the early 1970s, Xerox introduced light mode with its first “personal computer,” the Xerox Alto. Light mode was successful because it looked not only friendlier than dark mode, but also familiar. It was designed to mimic the look of ink on paper – something we see all the time!

The comeback kid

Dark mode made its first return with the Windows Phone 7. In 2019, it really made a comeback when Apple introduced dark mode for iOS 13 and iPadOS to create an environment that's easy on the eyes and helps users focus on their work. That same year, Google officially rolled out dark mode with the release of Android 10. Apps such as Gmail, Slack, Soundcloud, Twitter, Instagram, Facebook and more followed suit.

Why dark mode has gained popularity

There are many reasons why dark mode has gained popularity in the past couple of years:

  • After using light mode for so long, it feels new and exciting.
  • It was adopted by tech giants such as Apple, Facebook, YouTube and others.
  • Developers have been using dark themes for a long time.
  • Most entertainment and gaming user interfaces (UIs) tend to have dark themes (i.e. Netflix).
  • Dark mode improves the battery life of a device. White pixels are more power hungry than black pixels, so they use more energy.

More importantly, dark mode has gained popularity because of the benefits it provides from an accessibility perspective:

Dark mode minimizes digital eye strain

We stare at screens for most of the day. This can lead to something called computer vision syndrome (CVS), with symptoms that include eye pain, blurred vision, double vision, headaches, neck/back pain and more. The good news is that switching to dark mode can help reduce these effects.

Dark mode increases visibility in low-ambient lighting

Dark mode reduces bright light, making it easier to see in low-light situations, such as late at night or early in the morning. This benefit is especially important when we think about our world today. We’re not doing our work in one place, or at set times like we used to, so having a choice between light and dark mode means that we can adapt our technology to suit our environment.

Why designing for dark mode matters

Companies with a dark mode version of their website have it for a reason. They’ve put in the time and effort to create an alternative experience that is inclusive of all their users and their preferences. This is the real reason why designing for dark mode matters. From an accessibility compliance perspective, you’re not breaking any rules by not having dark mode, but there’s still the broader inclusion perspective to take into account. When we think about designing for accessibility and inclusion, there’s a ton of overlap. In both cases, we care about giving users a choice, so that they can access technology in a way that makes sense for them, no matter what their abilities are. If users can’t switch between light and dark mode, we’re removing another choice for them.

Dark mode and the recent White House website redesign

We haven’t done any dark mode projects ourselves, so we thought we would take a look at a site that has done an exceptional job implementing dark mode: The White House website. Biden’s administration redesigned the White House website around the idea that the White House is the people’s house, so creating an accessible and inclusive experience was top of mind1. The site includes features such as the ability to increase text size for optimal legibility, multilingual (English and Spanish) content and the option for users to include their pronouns when submitting contact forms. Most notably, they’ve done an awesome job creating a seamless experience between their light and dark versions of the site while incorporating dark mode best practices and principles.

Dark mode principles in practice

Dark grey is the new black

One of the first rules of dark mode is to use dark grey (#121212) in place of true black (#000000) as the primary background colour. Dark grey surfaces, unlike pure black, make it easier to express a wide range of colour, elevation and depth, because it’s easier to see shadows on grey.

You may be wondering, how big of a difference does this colour change make? On the White House site, they use Google’s Material design system standard background of #121212. If we switch the background to pure black, the difference isn’t startling, but you can see that the cards on the dark grey side look more elevated, while the cards on the pure black side look flat.

A screenshot of the new White House website, with a black background
A screenshot of the new White House website, with a very dark grey background
Move the handle left and right to compare images

Pro tip

Accessibility is still really important in dark mode. If you’re using white text on a dark background, it needs to have a contrast level of at least 15.8:1. If you’re using colour text, it needs to have a contrast level of at least 4.5:1. We love using this colour contrast checker.

Desaturated colours work better in dark themes

Using saturated colours on dark surfaces can create the optical illusion of vibrations, which can cause eye strain for viewers. That’s why we use desaturated colours. Although they look pale and pastel in colour, they are easier to read against dark backgrounds. When you do use colour, use them as accents. Dark themes should use limited colour so that the majority of space is dedicated to dark surfaces.

In the case of the recent White House website redesign, the iconic white, blue and red are all problematic in dark mode primarily because the blue and red don’t provide enough contrast. What’s interesting is that they’ve introduced a new light gold colour into their palette, which creates continuity between the light and dark experiences. It doesn’t seem like an obvious choice, but it works well as an accent on light mode and then becomes the dominant colour choice for dark mode. This creates the feeling of intention and continuity as you move between the two experiences instead of the unfortunate and very common situation you’ll see in most dark mode designs: a jarring transition that bears little to no resemblance to the brand or experience of light mode.

A screenshot of the Briefing Room page of the White House website, in dark mode
A screenshot of the Briefing Room page of the White House website, in light mode
Move the handle left and right to compare images

Pro tip

You can use the Material palette generator to create proto-palettes for your project. They say that the sweet spot for tones to use in dark UIs is between 50 and 400.

Avoid using pure white and use different shades to indicate hierarchy

When you’re designing for dark mode, it’s best practice to use minimal amounts of pure white (#FFFFFF) as it can visually vibrate against backgrounds (similar to what happens when you use saturated colours). Instead, different shades of white and grey should be used.

That being said, creating elevation and depth are key elements to any successful dark interface. One of the rules of dark mode is: the higher a layer is, the lighter it should be. This creates a visual hierarchy that implies which information is more important for the user.

On the White House website, they’ve used different shades of white strategically to indicate hierarchy while preserving proper contrast levels. They have used a slightly darker shade of white for text and kept the use of pure white limited to their call-to-actions, which you can see in their newsletter sign-up form. This use of pure white makes the form stand out even more in dark mode than in light mode.

An example of a well-built dark mode call to action (CTA) on the new White House website
An example of a well-built light mode call to action (CTA) on the new White House website
Move the handle left and right to compare images

Pro tip

Devs, if you're adding dark mode to a site, you may encounter the “dark mode flashing” issue where the colours of light mode show up for a moment when refreshing a webpage. Here's a helpful article to fix the flash of unstyled dark theme!

Is dark mode right for your organization?

The biggest drawbacks of creating a dark theme for a website are cost and time. These two factors can make it difficult to make a business case for adding a dark theme, but there are other reasons why you might consider designing a dark mode for your site:

  • You’re embracing accessibility, and this is an extension of that.
  • As part of your brand purpose and identity, you want to give your customers or audience more control.
  • You’re going through a brand refresh or creating a completely new brand identity and want to plan for the future.

Pro tip

You don’t need to design for dark mode right away. If you’re planning on a website redesign, think about what the palette for your dark theme would look like. Planning for the future can give you a better chance at creating continuity between your light and dark themes.

Uncompromising design

Although dark mode may not technically be considered an accessibility feature, we feel that it’s still important to talk about the value that a dark experience can bring to users and how accessibility is still of the utmost importance. Using these dark mode best practices, you can bring in the positive aspects of immersive storytelling while still caring about accessibility.

1 Fast Company: Under Trump, was a disaster. Biden’s team revamped it in 6 weeks (read the article)

Stories say it best.

Are you ready to make your workplace awesome? We're keen to hear what you have in mind.

Interested in learning more about the work we do?

Explore our culture and transformation services.

Our commitment to reconciliation

Learn how Habanero is responding to the Truth and Reconciliation Calls to Action as a settler-owned company operating on Indigenous territories across what is now called Canada.

Read about our commitment