In my last column, I wrote about dark patterns, but this time I want to discuss something that is literally rather than metaphorically dark: inverted polarity–display methods, or dark mode.
I haven’t addressed this as a stand-alone topic before, even though I’ve been doing dark interface design for years. I have a lot of experience designing for dark palettes and have discovered what works, what doesn’t, and have tried to learn why things do or don’t work so I can improve my designs.
But, for many UX designers, dark mode is a new thing because operating systems are now supporting it. In fact, dark mode is now so ubiquitous that it is almost a requirement for many new apps. Plus, it’s even making its way onto the Web. But the usual backlash has started, with some people questioning its value.
So let’s set aside all the rumors, opinions, and hot takes on this design style and, instead, take a look at what it actually means to be in dark mode, why it exists, and what the research on dark mode actually says.
Champion Advertisement
Continue Reading…
What Is Dark Mode, Anyway?
Dark mode, for the purposes of this column, is simply a tendency toward designing with a predominantly dark palette. Instead of using white or light-colored backgrounds, you use a black or dark background. As a consequence, text and icons are necessarily light to ensure they are visible.
Today, many operating systems support dark mode and pass theme and environmental information to mobile apps. These mobile operating systems promote the concept that all apps should have both light and dark—or day and night—themes. Thus, the user either automatically sees the night theme at night or in dark conditions and the day theme in light conditions, or the user can manually set dark and light modes, as shown in Figure 1.
Figure 1—Google News app in light and dark modes
Historically, this was a much higher-level choice. Early computer systems were always in dark mode because characters on screen and even drawings were inverted. I started my digital-design life working in this mode, and it certainly helps when one is used to it.
However, the advent of the Macintosh brought WYSIWYG displays and, with them, what we now call light mode came to the forefront. The assumption was that these displays were like printed paper—although, of course, paper doesn’t glow, but reflects light.
For a long time, light mode has been the default condition, with designers and developers rarely even thinking about other options or the consequences of color palettes beyond branding, style, and in all-too-rare cases, legibility, readability, or accessibility.
However, dark-mode interfaces of one sort or another have persisted in certain digital environments, often taking over from previous dials-and-lights interfaces. Control panels and car dashboards have traditionally been dark, with brightly lit dials and indicator lights. As digital screens have replaced these sorts of controls and readouts, they have tended to follow the same pattern, with dark backgrounds and bright labels and indicators.
Dark Mode for Dark Environments
Long before dark mode became trendy and, ultimately, received OS-level support, I had been designing applications and Web sites with dark palettes. Why? Well, to some extent, for battery savings. Displays on mobile phones are usually the biggest power consumers and, with the rise of lit-pixel displays such as AMOLED, the amount of power a display consumes is directly related to the total amount of light it emits. An app with a dark palette consumes as much as 90% less energy than one with a light palette.
But I design dark palettes primarily for the context of use. If users are often in a dim environment, a bright rectangle glaring at them is not good. In fact, it reduces the chances that users would even look at the screen, and they might simply choose not to use your app, Web site, control panel, or other interactive screen.
Netflix, as you can see in Figure 2, is a good example of a mobile app with a dark-mode design.
Figure 2—Netflix mobile app
Most streaming-video services default to dark mode because people do much of their viewing at night or in dimly lit spaces. Thus, a dark-mode interface is the best choice to ensure the interface doesn’t detract from the content. We don’t have a lot of white-bezel TVs, do we?
Sure, users can adjust the screen brightness to cope with an overly bright screen, but I try to avoid offloading problems to the users, assuming they’ll figure out how to solve them. However, let’s assume for a moment that users might move from brightly lit to dim areas and back again. They’re using a mobile phone after all, so people might be mobile.
In this case, depending on the users’ context, the screen might be too dim to see it in a bright environment or too bright to view it in dark conditions. Users might become annoyed, need to take actions to adjust their display, and miss key information, notifications, or transient conditions.
Dark backgrounds reduce the overall brightness of the display, so can be used in any lighting condition. On the other hand, using an app with a bright background can be difficult or even dangerous at night because it defeats night-vision acclimatization.
A typical dark-mode page is five to six times less bright than exactly the same content in light mode.
Some Notes on Contrast
For at least ten years, designers have been surreptitiously reducing contrast in light-mode designs. Black text is rarely black anymore, and there is a lot of gray text in use—besides that for graying out disabled text. For style reasons that I don’t fully follow, black on white is too harsh or something. But I am opposed to this trend because I always try to maximize contrast.
Note that I said contrast. The term color contrast—despite its being the W3C-promoted industry term—is misleading. I pointedly never use it because I went to school for art and graphic design, so have a background in color theory.
Color is made up of three components, which I’ll now try to explain as simply as I can:
hue—The spectrum on which a color appears.
saturation—How intense a hue appears.
value, or brightness—The amount of black or white that is added to the color.
Editor’s note—For an in-depth exploration of color theory for digital displays, see Pabini Gabriel-Petit’s series on UXmatters. Part 1 covers these color properties and the basics of contrast; Part 2 delves more deeply into contrast effects; and Part 3, into the application of color theory to digital displays.
Anyway, to most people, in most situations—including most designers, developers, and product managers—the term color more or less means the hue part, not anything else. Red or green, for example. So, to these people, the term color contrast implies that contrast relates to hue, but it does not.
Contrast instead means the difference between the value, or brightness level, of two different design elements. Small differences create low contrast, so elements are hard to differentiate or see. Large differences create high contrast, so elements are easy to tell apart or read.
Critically, this difference exists regardless of hue. Contrast itself is important—as is understanding its impact. Contrast lets designers address the need for readability and accessibility, in the unpredictable environments in which mobile users find themselves—and, most relevant to this column, when changing color palettes. Contrast is contrast, regardless of the color, or hue, of the elements.
Contrast in Dark Mode
All this color-theory stuff matters if you’re trying to create a design with at least two different color palettes. When dark-mode palettes are implemented properly, their low overall output provides extremely high contrast, without anyone on a project team worrying that the display is too harsh.
But you still need to keep the contrast as high as possible, which trips up a lot of designers—and a lot of the apps and Web sites they design suffer for it—because dark-mode design suggestions, guidelines, and inspiration sites too often throw away everything we know about contrast, visibility, readability, and universal design.
This is an area where Google’s Material Design falls down on the job. Google suggests very dark—although highly saturated—accent colors, but lots of very low-contrast, gray backgrounds.
Their examples for creating a dark theme—a dark mode for your default light-mode app or Web site—make strange choices such as discarding simple lines around card edges and replacing them with almost undifferentiable, dark-gray backgrounds.
The satellite provider Dish also has a video-streaming service, including a mobile app. As Figure 3 shows, they fall into this same misuse of gray.
Figure 3—Dish Anywhere mobile app
In most of the examples in these figures, the apps are too gray. But look closely at the Twitter one-tab bar in Figure 4. Forget color for a moment and note that they use hollow icons for available tabs, but switch to solid icons for the selected tab. While these are not the most effective tabs, users can at least differentiate them.
The Dish tabs are simply text, in gray or red. Whether the user is red/green colorblind, not acclimated to night, or there’s simply some glare on the screen, there’s little chance of telling the difference between these two.
Look again at these figures, and you’ll find many other contrast issues, which impair readability, as well as understanding.
Remember, contrast is important for an entire application, not just text and icons. If users can’t differentiate the masthead or title bar from the rest of a pane, they’ll have trouble orienting and finding icons and become confused when part of the page scrolls, but other parts do not.
Dark Is Not Black
There are lots of colors in the world, so there’s simply no reason to desaturate, when you can darken instead. Back to color theory: you can keep hue and saturation, just change the brightness.
A shade is not a version of a color, but specifically means adding black to the color. A tint means adding white. Thus, pink is a tint of red.
If your brand color palette is all bright and cheery, a quick, easy way to start creating a dark palette is to create shades of all your colors. Darker versions of colors often work very, very well.
I design almost nothing with a pure black background. My exceptions are where black is a key part of the brand. Instead, I choose another dark color from the palette—or make a shade of one myself—and find that it has the same effect as black or very dark grays, while reinforcing the brand sense.
The Twitter mobile app, when set to dark mode as shown in Figure 4, uses a number of dark blues for backgrounds. This makes their blue, branded elements work better, is somewhat less harsh than pure black, and provides design options.
Figure 4—Twitter mobile app in dark mode
Instead of just using lines or grayscale, Twitter uses these various dark shades of their branded blue to set off sections as strips of content. They also border them with somewhat brighter, very thin lines. This is a long-standing trick—from the distant past of print and signage—to make lower-contrast edges pop out a little more.
Always remember context. Follow design guidelines to ensure there’s enough contrast, check contrast in dark rooms and other typical environments, and test with real users, where they really use the products. Don’t just create something that looks good in a conference room PowerPoint.
Research on Dark Mode
Sadly, research on dark mode is pretty sparse. While I can say that my designs work great, I won’t oversell you or try to generalize my results. However, I do see—anecdotally, during testing and other observations—users failing to work with overly bright screens and the other behaviors that I’ve outlined in this column.
What research there is can also be pretty hard to understand, very academic, and so far, is very lab based. This last reality is especially regrettable because much of my reasoning is around coping with the variability of the real world.
Anyway, the few applicable research studies I’ve found indicate that dark mode is not quite as readable in the dark as one would expect, relative to light mode. Now, this is very narrow research, so didn’t account for screens being in outdoor-brightness mode and so on. It also involved a fairly standard test of readability, with text as the content being consumed.
But surprisingly, dark mode is notably more readable in bright light than light mode is.
The differences in readability in both cases were certainly statistically significant, but smaller than the differences in readability you would get from changes to type size or contrast—or from reading in different environments such as walking versus stationary. So they are both acceptable in my book.
Most interesting is that the results in bright conditions mean I no longer have to think that dark mode is merely acceptable, but in fact, may be as good as good as light mode or even preferable in those conditions.
Conclusions
Supporting dark mode or designing your app entirely using a dark palette can be very beneficial for your users.
But, remember, this is not just about style. Design choices such as a color palette have enormous implications around usability and perception. Don’t think that, once you have a good design, you can change things like the entire color palette based on a whim or trend.
Keep track of design basics. Never downplay critical things such as size, spacing, and contrast just because a design is in dark mode.
As always and most of all, focus on the user. Try to understand how people would use your product, and make sure you’re designing for their context and their needs.
Resources
Buchner, Axel, Susanne Mayr, and Martin Brandt. “The Advantage of Positive Text-Background Polarity Is Due to High Display Luminance.” Ergonomics, Volume 52, Issue 7, July 2009. Retrieved December 15, 2019.
Dobres, Jonathan, Nadine Chahine, and Bryan Reimer. “Effects of Ambient Illumination, Contrast Polarity, and Letter Size on Text Legibility Under Glance-like Reading.” Applied Ergonomics, Volume 6, April 2017. Retrieved December 15, 2019.
Google. “Dark Theme.” Material Design. Retrieved December 15, 2019.
Kim, Kangsoo, Austin Erickson, Alexis Lambert, Gerd Bruder, and Greg Welch. “Effects of Dark Mode on Visual Fatigue and Acuity in Optical See-Through Head-Mounted Displays.” Proceedings of the 2019 Symposium on Spatial User Interaction (SUI), New Orleans, USA: Association for Computing Machinery, October, 2019. Retrieved December 15, 2019.
There is some research that suggests dark modes—light text on dark backgrounds—help inhibit eye’s myopia, too. I can’t link directly, but check out the paper “Reading and Myopia: Contrast Polarity Matters,” by Andrea C. Aleman, Min Wang, and Frank Schaeffel.
Thank you for this article and for sharing your experience. This is very timely for me at my job, and I want to make sure I design a dark-interface version properly. Cheers!
For his entire 15-year design career, Steven has been documenting design process. He started designing for mobile full time in 2007 when he joined Little Springs Design. Steven’s publications include Designing by Drawing: A Practical Guide to Creating Usable Interactive Design, the O’Reilly book Designing Mobile Interfaces, and an extensive Web site providing mobile design resources to support his book. Steven has led projects on security, account management, content distribution, and communications services for numerous products, in domains ranging from construction supplies to hospital record-keeping. His mobile work has included the design of browsers, ereaders, search, Near Field Communication (NFC), mobile banking, data communications, location services, and operating system overlays. Steven spent eight years with the US mobile operator Sprint and has also worked with AT&T, Qualcomm, Samsung, Skyfire, Bitstream, VivoTech, The Weather Channel, Bank Midwest, IGLTA, Lowe’s, and Hallmark Cards. He runs his own interactive design studio at 4ourth Mobile. Read More
