A website or app featuring dark mode might have a black background, but this design feature alone isn’t enough to constitute a dark ui.
There’s a big difference in designs that use dark mode in a way that’s visually appealing and highly usable, compared to websites that simply feature a dark aesthetic.
True dark mode is so much more than using a reverse color scheme, with the potential to delight users, impact usability, and even provide a more accessible option for your website or app.
Dark mode 101
Facebook has it. Gmail has it. So do many apps on your phone and computer, regardless of whether you use an iOS, Windows, or Android device.
But what is dark mode?
Simply put, dark mode is a predominately dark color palette. Darker colors are used for the background, large elements, cards and other accents, with lighter colored text elements.
However, it is not as simple as a black background and white text. Although in a truly minimal design scheme, it probably could be.
Dark mode isn’t particularly new – designers have been creating in “reverse” as long as printers and websites could handle it. But it is trending, thanks to options in popular user interfaces and a seemingly high preference among users.
Users like dark mode
Website designers and developers might be a little biased, but do seem to have an affinity for dark mode. The general public seems to agree.
From two informal surveys (there’s no authoritative source on a phenomenon this new yet):
68% of respondents use dark mode when it is a choice (Slashdot poll).
82.7% of respondents use their operating system dark mode (Developers Channel Twitter survey).
Discord, a chatting app, is mostly based in dark mode after testing it with users and finding great success.
“The percentage of Discord users on light theme is in the single digits — and not even the higher ones,” according to the Discord Blog. It is worth noting that app developers found that it was important to support both color schemes, even with such a high preference for dark mode.
What makes dark mode work?
Dark mode might be most appealing to users because it is different. By flipping the color scheme, you get immediate access to a cool new aesthetic.
Moreover, dark mode gives users more control over how they use websites and apps. It seems like such a small tweak, but the ability to set this preference can greatly enhance a user’s connection to your design and affinity for using it.
An app or website that is more in line with user preferences, can result in more frequent visits with longer durations. (This fact alone makes considering dark mode a no-brainer!)
Dark mode works for other reasons as well:
Forms an emotional connection with users.
Enhances usability throughout different times of day and lighting conditions.
Allows for greater accessibility for varying levels of vision impairments.
Increases battery life
Dark mode and emotion
A dark user interface – whether dark mode in particular or any dark interface in general – sets a certain mood and emotional tone. Dark colors convey a different type of emotion than light or bright hues.
When considering dark mode for your interface design, think about the meanings behind black for a moment. Does it go with your brand or the emotion you want to convey? It’s also important to note that while you might not use pure black in your dark UI – and you probably shouldn’t – that all extremely dark colors have similar emotional associations.
Somber
Authoritative
Luxurious or elegant
Strong or powerful
Simple
Formal
Intimidating
Dramatic or mysterious
Modern
Sophisticated
The trick as a designer is understanding that a color palette that’s dark might need some light, warm, or bright accents to keep the feel more cheery or optimistic in nature. On the other hand, a more somber design can benefit from a dark scheme with cool accent colors.
It’s important to design and develop a color scheme for dark mode that does not have a different emotional impact on users. The goal is that a user should feel the same about your website, app, or information therein in light or dark mode.
That can be a real challenge. But it is doable.
Start with a limited color palette, that’s not true black. While there is that little battery benefit to a true black interface, an almost-black palette is more visually appealing while still prolonging battery life.
When it comes to designing dark mode and establishing the right emotional tone, take these design considerations into account:
Accent colors in dark mode might need to be brighter/lighter than in an environment with a light color scheme. Look to secondary brand colors here.
Streamlined color palettes are easier to control emotionally. With a dark UI, a more monotone color selection can help create just the right mood.
Dark mode should not look or feel unlike your brand; if it does, try another design concept.
Dark mode and usability
Dark mode can be highly usable when done well.
Plus, there’s an interesting side benefit: A screen that doesn’t have to function with as much brightness or pixel rendering can conserve battery life for devices. The science behind this is that individual pixels “do less work” and use almost no battery life for true black, Google confirmed.
Dark UI is preferred among some users because it is easier on the eyes – figuratively and literally. Dark interfaces can reduce eye strain for many users. Apple even touted this benefit when it introduced the Mojave interface, saying that its dark mode interface is “easy on your eyes and helps you focus on your work.”
Another reason for using dark mode? Users find that using a dark interface, particularly in conditions with low light or before bedtime, lessens the effects of blue light on their systems. There are scientific links to nighttime light exposure and poor sleep, which further reinforce the benefits of dark mode emitting less blue light.
With all of this to think about, it’s no wonder that dark mode is so popular.
When it comes to designing a usable interface for dark mode, the most important element is contrast. In addition, ample contrast is good for ensuring better accessibility, too.
Start with a limited color palette, that’s not true black. While there is that little battery benefit to a true black interface, an almost-black palette is more visually appealing while still prolonging battery life. Consider a dark gray, purple, or blue as the background color.
Google’s Material Design guidelines suggest gray as a means to “express elevation and space in an environment with a wider range of depth.” In addition, the guidelines further suggest using white body text to help achieve an optimum contrast ratio for reading.
Apple’s guidelines for using dark mode differ because iOS uses a “dynamic” color palette. This means that the color palette is automatically pulled from system background colors. It is therefore not suggested to create a custom background color.
Saturated colors might be great for a light color palette, but don’t translate well in dark mode. In fact, such colors can almost fall into a dark background. Lighter colors will be more readable, reduce eyestrain, and help guide users through the experience.
For the best results, opt for a dark mode palette that uses a dark background, white (or light) body text with some varying levels of transparency for emphasis, and a single accent color with tints or tones. Start with a color from your brand palette as an accent color, but brands with highly saturated color palettes might want to develop a dark mode option.
Determining the best color combinations and contrast can be a little tricky. Once you have an idea of your background color and text color and size, it’s worth using a color contrast testing tool, based on Web Content Accessibility Guidelines (WCAG 2.0). Aim for an AA grade or higher in dark mode. This will ensure optimum usability as well as color accessibility.
Dark mode and accessibility
Accessibility goes hand-in-hand with usability, but it takes some of those ideas a step further. You want as many users as possible to get the full experience of your website or app, including the dark mode option.
When it comes to accessibility, the top concern with dark mode is color choice and contrast.
The Nielsen Norman Group took a look at a lot of the research behind dark mode and visual comprehension, for impaired and non-impaired users and came to this conclusion: “We strongly recommend that designers allow users to switch to dark mode if they want to — for three reasons: there may be long-term effects associated with light mode; some people with visual impairments will do better with dark mode; and some users simply like dark mode better.”
From an accessibility standpoint, this recommendation makes a lot of sense. Providing more users with more options for optimal viewing of your website or app will innately make it more accessible.
Design an effective dark mode
Make your dark mode design shine with the right design plan and techniques.
Here are 10 design recommendations to help you create a dark mode that will wow users:
Stay away from black backgrounds. A close-to-black option has deeper color, a richer feel, and can better establish the right emotional connection with your audience. The Material Design recommendation of # 121212 is a good starting point. Add blue (1a1f2c), green (212c1a), or purple (161118) for dramatically deeper options.
Establish a hierarchy of elements within your color palette using tints and shades to create a sense of depth. Darker colors will have less visual weight thanks to a dark background, with lighter colors carrying the most visual importance.
Dark mode does not have to be derived from a light theme. What matters is that dark mode is visually usable and still “feels” like a part of your brand’s design identity.
Allow a dark/light mode toggle. Dark mode should always be a choice. Ethan Marcotte does a nice job of that with his website; the toggle button is in the footer.
Use transparency and opacity to your advantage, particularly with text elements. Ensure adequate variance between percentages to achieve optimum reading comprehension and accessibility. Three levels of text emphasis is ideal: Most important should be 88% white, the main body text (medium emphasis) can be around 50%, and low-value text or disabled text elements can be less than 40% white.
Test dark mode designs in different levels of light and environmental conditions. This can dramatically change how the design looks or how you feel about it.
Use a limited, tight color palette for dark mode, generally 2 to 3 colors. In most instances, it will be easier to manage and maintain consistently.
Ditch the drop shadows. What good does a shadow do in the dark? A shadow is something that’s connected to a light source, which is why they can feel natural in light mode designs. Shadows are completely unnecessary here.
Maximize use of white (or in this case, dark) space. Give elements plenty of room to breathe. Additional space can make a dark design feel less cramped or intimidating, while putting more emphasis on key design elements or text.
Use less saturated colors with dark mode to improve readability and accessibility. For most hues, start with a 20% saturation and tweak the intensity against the background. Run all color choices through an accessibility checker to ensure there’s enough contrast between background and foreground colors.
Conclusion
Dark mode, and dark user interfaces, are increasingly popular and can provide a deeper user experience for a variety of websites and apps.
More operating systems are including dark mode by default, so it’s important to start catering to this growing need. Design a dark mode that works with your brand and website or app aesthetic, and don’t rely on an OS to do it for you. Creating a successful dark mode can be a complex and rewarding design challenge that will enhance user experience.
.png)
