Monday, March 24, 2014

color considerations with a dark background

I was working on some data visualization makeovers a few weeks ago and found myself facing a challenge I hadn't previously encountered: the need to leverage a dark background.

When it comes to slides that communicate data, I don't typically recommend anything other than a white background. Anything else makes me think of Tufte's conversation on data-ink ratio. His basic idea is that you should work to maximize this figure (more data and less ink, vs. the opposite). In The Visual Display of Quantitative Information, he says, "Every bit of ink on a graphic requires a reason. And nearly always that reason should be that the ink presents new information." If we think about a colored or dark slide background from the perspective of the data-ink ratio, that's a whole lot of ink for no data at all.

Nancy Duarte more directly discusses dark backgrounds in Slide:ology, listing the following considerations:
  • Dark background: formal, doesn't influence ambient lighting, doesn't work well for handouts, fewer opportunities for shadows (Cole's input: I don't think this is a bad thing!), for large venues, objects can glow. 
  • White background: informal, has a bright feeling, illuminates the room, works well for handouts, for smaller venues, no opportunity for dramatic lighting or spotlights on the elements (Cole's input: as in the "fewer opportunities for shadows," I think the lack of opportunity for "dramatic lighting", though phrased as a negative is actually probably a good thing).
Let's take a look at what a simple graph looks like on a white, blue, and black background:

The blue and black backgrounds just feel heavier to me. They make my eyes almost pulsate a bit (that's probably the glow that Duarte referred to). That, plus Tufte's data-ink ratio and Duarte's considerations together seem to indicate that one should generally opt for a white background. That said, sometimes there are considerations outside of the ideal scenario for communicating with data that must be taken into account, such as your company's (or client's) brand and corresponding standard template. Such was the case in my specific situation.

I didn't recognize this immediately. Rather, it was only after I had completed (I thought) my revamp of the original visual, that I realized it just didn't seem to fit with the look and feel of the work products I'd seen from the client group in general. Their template was sort of bold and in your face with a mottled, black background spiked with bright, heavily saturated colors. In comparison, my visual felt sort of...meek. Here's a genericized version of my initial makeover:

To solve for this, I remade my own makeover leveraging the same dark background I'd seen used in some of the other examples shared with me. I had to sort of flip around some of my normal thought process. With a white background, the further a color is from white, the more it will stand out (so grey stands out less, black stands out very much). With a black background, the same is true, but black becomes the baseline (so grey stands out less, and white stands out very much). I also realized some colors that are typically verboten with a white background (for example yellow) are incredibly attention grabbing against black (I didn't use yellow in this particular example, but did in some others).

The same goal of identifying and eliminating clutter (elements that aren't adding informative value) still hold. In fact, reducing clutter becomes even more important on a dark background, because you're already dealing with the high ink to data ratio that we previously touched upon. So less already looks like more than it would on a white background. But it can be done.

Here's what my "more in line with the client's brand" version of the visual looked like:

What do you think - are black or colored background out when it comes to communicating with data, or can it work? What other considerations should we make when working with non-white backgrounds? What other scenarios might lead us to want to choose a dark background? Leave a comment with your thoughts.


  1. Interesting piece. Agree with what you are saying, but find that that black/dark can work very well to put space/scientific subject matter into context. Obviously colour combinations are very important. In print considerations in printing white out/coloured text also apply

  2. I had an interesting reaction when reading your article. My initial thought was “of course black backgrounds aren’t good for charts”, thinking back not only to my own reading of Tufte and Few, but to the numerous examples I’d seen at work where a black background was used for charts that were rendered difficult to interpret as a result.

    But then when I saw your re-working of the survey chart, I saw that a black background can not only be effectively presented (if you are as diligent about color and shading as you are with a normal white-background chart), but can make a chart appear more “self-contained”, i.e. it provides a border or enclosure to the chart which helps it stand out, especially when placed inside of a white web page or presentation. In other words, your original chart, while cleanly designed, sort of floats there in the whitespace of the blog, whereas the black chart is more visually distinct. This reminds me of the photographic technique of vignetting, whereby a subtle dark border is placed along the edges of the frame, both keeping the eyes from floating outside of the frame and guiding them to the subject matter in the center.

    As in everything, context matters. A very thought-provoking read.

  3. I like the approach to visualizing the Likert-type data (was just discussing this in a course I taught on dataviz last week). I love the right and left baselines that draw our eye to the trend for the SD as well as the SA answers.

    Two possible challenges though: 1. Since light gray is a considerably weaker emphasis color than red, it implicitly suggests that the SD story is more important than the SA story, something that was more balanced in the original makeover. Second, the black labels on the light gray are problematic since they bleed over into the dark gray of the D/N/A middle range where the black on dark gray is nearly unreadable. This challenge is repeated up in the key where "Disagree | Neutral | Agree" is nearly unreadable in gray on black. Although the middle values (D|N|A) are to be de-emphasized, I hesitate to include something on my slides that is actually unreadable, however unimportant. But, perhaps they become readable when projected (and/or the resolution on my screen is making them worse than they really are)? Unfortunately, the challenge is repeated in the story addition, where "Dissatisfaction was greatest for" is also in the dark gray on black background and again very difficult to read.

    Perhaps when black is the background color, light gray needs to be the neutral de-emphasized color, rather than dark gray? Would light gray be more readable and at the same time allow for black to show up when written over it? This would mean though that the right emphasis color would need also to switch from its current light gray to something else.

    Hmmmm. Thanks for helping us all to think on it.

  4. I agree with your findings; however, I would say if you are going to use a Dark Rich background (Black) then it should be done with 2 versions. Do a print out in gray scale where the black is white and vice versa and then make sure that the colors areas stay the same so that printed version looks like the Black background version but still highlights the data.

  5. Hi, Cole.

    Tufte's data-ink ratio is a useful guideline that helps identify extraneous elements in graphs. I'm not sure that it follows that black must represent the ink, however. If you take a screen capture of this entire page and invert the colors, then the graph on the left in your example will flow seamlessly into the black background, and the one on the right (now white) will have a distracting square around it. With a little adjustment of the type, the graph with the dark background can be made comparable (or nearly so) to the original white one in terms of legibility and lack of pulsing.

    In answer to your question about when you might want to use dark backgrounds, you may find yourself designing for low-light settings, such as patient rooms in hospitals. I suspect (though I do not know this for a fact) that the monitors display patient vitals on a dark background to keep from lighting up the room more than needed when a patient is trying to sleep, and to not blind clinicians who come into a darkened room to check on the sleeping patient.

    Jeff Harrison

  6. Piggy-backing off of Jeff's comment, dark backgrounds seem to work best in low-light settings, where the light emitted from a bright screen can cause considerable eye strain...good luck communicating your data when your users can't even bear to look at the screen. The GPS folks have known about this for quite some time as most GPS devices will switch to a dark background when operating in night mode. Some industries have known about this for even longer. Instrumentation in airplane cockpits and on the bridge of ships also use dark backgrounds.

    Rob Shell

  7. Agree Rob. I started out years ago in comms working in a 35mm computergraphic slide bureau. The workable rules were 35mm slides with dark backgrounds and light (white/yelow) text worked in darkened rooms. For rooms with high ambient light that does not work and OHTs were better (clear background with dark text and colours) more like modern high ambient light environments.

    The other thing that strikes me is that dark background with light (glowing almost) text is 'unnatural' I mean we see throughout the day and live our lives with very little of that pattern that is not man made. The only natural example of that dark background + light on top is the night sky. Perhaps that's an unconscious reason why they 'feel' so heavy to our perception .. ?