Dark UI design best practices
This article is an updated and expanded version of two of my previous articles “The Principles of Dark UI Design” published by The Startup and “Dark UIs: the dos and don’ts” by the UX Collective.
Creating the look and feel of a product is one of a designer’s primary responsibilities — the initial design decision must be appropriate to the product’s purpose, the particular situation, and its audience. The usual instinct, almost by default, is to design the UI on a bright background, but lately, due to the emergence of dark themes, some designers opt for a dark canvas.
There are good reasons for choosing a bright background. Contrast, text, and readability, and the ability to work with a wide range of subtle colors are some of them. Moreover, according to many scientific studies, optimal legibility requires black text on a white background. Branding may also influence the decision because some company logos and colors will not work with a dark color palette.
There is also an expectation: people are used to seeing a variety of content rendered with dark ink on a white background. Think newspapers and magazines — which have been around for more than 350 years. Going back even further — thirty-five thousand years to the Paleolithic era (the caveman days), we find cave drawings of bison and mammoths generally placed on a light background with charcoal or burnt bones used to draw the depictions.
Nevertheless, when a project warrants it, today’s digital product designers may choose to work with a dark color scheme for a variety of reasons. It’s often an aesthetic choice meant to convey drama and elicit an emotion — something unexpected — or perhaps a designer wants to fuse the design with branding, or make certain that visual content stands out.
Beware of Pitfalls of the “Dark Side”
Digital products with dark UIs — associated with power, elegance, and mystery — are a formidable trend. While it’s often said that dark mode can reduce eye strain, there is no evidence this is true. With OLED screens, it’s also supposed to save battery life. Still, more often than not, dark themes are an aesthetic choice.
Designers who have not worked with dark UI design and decide to jump in with both feet may find themselves in uncharted waters. In the ocean of dark UIs, norms are bent, rules are changed, and pitfalls are aplenty.
If a designer chooses to cross over to the “dark side,” they will face a number of challenges. Usability issues come into play — mostly related to scannability, readability, and contrast. A variety of things must be considered. Sufficient contrast between text and the background, the environment in which the product will be used, as well as the device on which the UI is likely to be viewed.
We should also be mindful of color psychology as most colors represent different things for different people. In Western cultures, black is often associated with death, mystery, and evil. Green is associated with growth because of nature. Blue is almost universally considered calming because it’s associated with the sky and water. Color is emotional, therefore, dark theme designs should be handled with care.
Dark UI vs. Light UI
Not all interfaces are suitable for a dark theme. Designers should look at brand fit, cultural suitability, and color psychology, and consider the emotional impact before choosing to go with one. It’s a tricky balancing act.
Whereas a financial app targeting millennials may achieve the cool factor with a dark theme, it may be inappropriate for a big bank’s website aimed at the general population. Too rich, too dark, and too stylish may become more frustrating when all people want to do is check their balances and pay a bill.
B2B SaaS application dark UIs are notoriously difficult to design. Standard web UI components such as data tables, widgets, forms, and dropdowns can look odd on a dark UI. Because many color schemes don’t work well with dark UIs, certain brands and products — depending on type, context, and environmental factors — are not a good fit and may prove to be an insurmountable challenge.
Designers need to consider the context in which the interface is likely to be used. In the right context, environment, application, and use, dark theme UIs may make sense. The choice to go with it should depend on content and context: what, when, where, and on what device.
When Dark UIs Don’t Work Well
Dark-themed UIs are a bad choice for text-heavy and data-heavy content, or when using a variety of content types (text, images, video, data tables, dropdowns, fields, etc.). The general consensus in the design community is that dark UIs are a huge challenge to design for unless you are dealing with simple content, a few accent colors, and a sprinkling of text here and there.
The challenge is trying to maintain sufficient contrast, which impacts the overarching challenge: readability, which is connected to usability, which impacts UX. Generally, all colors work on a white background, whereas on a dark background the useful range of colors is dramatically reduced.
Contrast in Dark UI Design
A dark theme is not a black theme. It would best be thought of as a “low-light” theme. One of the main concerns with dark UIs is achieving enough contrast so visual elements have separation. Most designers would think using black would be optimal to achieve strong contrast. However, it’s best not to use true black (#000000) for backgrounds or surface colors. Black is best reserved for other UI elements and used sparingly. For example, true black can be used for small UI elements or a surrounding bezel.
Google’s Material Design dark theme recommends using dark gray (#121212) as a dark theme surface color “to express elevation and space in an environment with a wider range of depth.” In addition, many designers recommend adding a subtle dark blue tint to dark grays when defining the color scheme. It tends to create a better dark tone for digital screens and a more pleasing dark UI color palette.
An advantage of using a range of grays is that it gives designers latitude because a broader range of colors can be expressed. A gray palette also helps create depth because drop shadows can be more easily seen against gray vs. black.
It’s also a good idea to test on various displays and devices for proper contrast between other UI elements, such as cards, buttons, fields, and icons. If there is an imperceptible separation between UI elements, the design blends too much and risks becoming dull.
Focusing Attention: Color
Color stands out in dark UIs. It’s best to use dark color schemes with lighter, unsaturated accent colors. Avoid using saturated colors in dark UIs, as they can visually vibrate against dark surfaces. Further, as a best practice, colors need to pass the Web Content Accessibility Guidelines’ AA standard of at least 4.5:1 when used with text.
When defining a color scheme for a dark UI, Google recommends a limited number of color accents to keep most of the space available for dark surfaces. Using split complementary colors can help. The scheme has one dominant color and two colors adjacent to the dominant color’s complement. Doing this provides the needed contrast without the tension of the complementary color scheme.
The right color scheme can help create good contrast. Colorable is a helpful tool for selecting accessibility-compliant color combinations of text and background colors.
“Use strongly contrasting colors to improve readability. Many factors affect the perception of color, including font size and weight, color brightness, screen resolution, and lighting conditions.” –Apple Human Interface Guidelines
Less is More: Leveraging Negative Space
One of the fundamental elements of successful dark UI design is the adroit use of negative space. If put together poorly, dark UIs can appear heavy and overbearing. To counterbalance, designers can make dark UIs more lightweight by taking advantage of negative space within sparse, minimalist designs. Minimalist design is just as much about what isn’t there as what is. When used skillfully, negative space will make a dark UI more scannable and allow people to absorb information more easily.
“Space is substance. Cézanne painted and modelled space. Giacometti sculpted by ‘taking the fat off space.’ Mallarmé conceived poems with absences as well as words.” — from the book, The Art of Looking Sideways by graphic designer Alan Fletcher.
The same sentiment is true for scannability — negative space between elements is what makes a layout work. It is what gives them definition. It emphasizes important content and provides the necessary breathing space to ensure the design doesn’t feel dense and cluttered.
Interfaces crammed with too many elements and text are the bane of high-quality dark UI design. By carefully considering the visual hierarchy in dark UIs, designers can make their creations more easily scannable, thus elevating the user experience.
The Dos and Don’ts of Using Dark UIs
The decision to use a dark UI design over a traditional one needs to be approached with discretion. It shouldn’t be chosen for the wrong reasons — to be hip, different, or mimic someone else’s design. Designers should have a strong rationale for their choice and consider the content, context of use, and the device on which the design will appear. It’s a delicate balancing act as there are many potential benefits, but also many pitfalls.
When it’s OK to use dark UIs
- To achieve a strong, dramatic look for striking visuals
- When a branding color scheme warrants it
- To elicit an emotion — for example, a feeling of intrigue and mystery
- To create a sense of luxury and prestige
- To help focus and guide the user’s attention with minimal distractions
- When it’s appropriate for the context and use, such as nighttime entertainment
- To support a specific context, such as nighttime entertainment apps
When it’s best to stay away from dark UIs
- When there is a lot of text (reading on a dark background is difficult)
- When it doesn’t fit the brand
- When there are a lot of mixed content types
- In the case of B2B applications with lots of forms, components, and widgets
- When the design calls for a wide range of colors
Summary
Dark themes are suitable for some digital products but a real struggle to implement for others. Simplicity is key. They’re great for presenting minimalist content, data visualizations, media sites, and entertainment platforms. They’re a poor fit for complex, data-heavy B2B platforms, text-heavy pages, and lots of varied content.
For courageous designers ready to cross new stylistic frontiers and explore dark UIs through an emotional and aesthetic lens, they offer an exciting playground of infinite possibilities.
However, crossing over to the “dark side” should be approached with care. Deeper, more thorough research and analysis are recommended before making a reckless decision fraught with risk. Once a designer goes down that path, it’s very difficult to turn back. Designers would be well-advised to consider all aspects — the good and the bad, the dos and don’ts, before jumping in with both feet.
👋🏻 Hello! Thanks for reading and getting to the end of the article. 🙂
I’m now available for starting people on their UX designer careers through my UX Course or for ongoing mentorship on MentorCruise.
Learn UX with me at half the cost of crappy bootcamps. Get certified & build a portfolio for a high-paying job. 7-day free trial http://uxwithmiklos.com
