Dark Isn’t Just a Mode :: UXmatters

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
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
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.

Hoober, Steven. “Designing for Intrinsic Understanding.” UXmatters. March 4, 2019. 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.

Smith, Lilly. “Dark Mode Is Everywhere. Is It Really Better for You?” Fast Company, October 29, 2019. Retrieved December 15, 2019.

Center for Persons with Disabilities. “Contrast and Color Accessibility: Understanding WCAG 2 Contrast and Color Requirements.” WebAIM, Nov 29, 2018. Retrieved December 15, 2019.

Source link