Black or White: What Color Works Best for the Background of a Screen?
Have you noticed that many business intelligence (BI) software companies have introduced black screens as the standard for mobile devices? Is this because mobile devices work better with black screens? If you look for the research, as I have, it isn’t likely that you’ll find any. Just as when dashboards were new and someone came up with the bright idea of using graphs that looked like speedometers and fuel gauges on cars and everyone else followed suit, the practice of black screens on mobile devices has been adopted for the same reason: someone did it and others followed.
Few software vendors in the BI space do research or even read relevant research by others. A software developer does something on a whim and others copy it. Vendors find this approach faster and cheaper than research. The results, however, are costly to those who use the software.
I recently gave a keynote presentation at one of Actuate’s events and also led a separate smaller session to discuss data visualization best practices. During the smaller session, the issue of black screens on mobile devices arose—a practice that Actuate emulates. A fellow from Actuate made a passionate case for black screens by taking a bright flashlight, shining it directly into his face, and proclaiming, “This is what happens when you use a white screen on a mobile device.” His point was dramatic, but erroneous. The amount of light that is emitted from mobile devices with white screens is no greater than that emitted by laptop or desktop screens. It is not like staring into blazing light.
The same vendors that advocate black screens for mobile devices when graphics are involved, such as in a dashboard display, conversely advocate white screens for applications that involve reading, such as e-books. Illustrated below, RoamBI uses a black background for its analytics applications and a white background for its reports application.
No one seems to question the efficacy of light backgrounds for reading text. Why the difference? Text and graphics both involve objects that are constructed of lines and filled in areas of color. Do they differ in a way that demands a different background color? I don’t think so.
If you’ve worked with computers as long as I have, you probably remember that the original CRT displays used black backgrounds (i.e., the absence of light) and projected green phosphor pixels to form text. I remember the first time that I saw a screen that didn’t render text in green but did so in orange, which was a delight. Those old screens were hard on the eyes. As display technologies improved, light backgrounds became the norm for most applications. As it turns out, there was a reason for this. White or slightly off-white screens provide a better background against which information, whether in the form of text or graphics, stands out clearly and is easy on the eyes.
When I’ve asked vendors and others about the emergence of black screens on mobile devices, I’ve encountered the following arguments for their use:
- Black is the absence of light, so a screen with a black background uses less energy, which extends the time that a mobile device can run without having to recharge the battery
- Mobile devices are used in a broader range of lighting conditions, including direct sunlight, and black screens are less reflective than white and thus easier to read in direct light
- White screens emit too much light and are therefore hard on the eyes (the explanation provided by the fellow from Actuate)
- Bright colors on black screens look cool
- Everyone else is doing this, so there must be a reason
If we’re interested in effectiveness—the users ability to see information as clearly as possible—the last three arguments above can be dismissed without further consideration. The first argument, regarding the preservation of the battery’s charge, sounds plausible, but it might be based on a misunderstanding of the display technology. When I have questions about uses of color in data visualization or about display technologies, I usually consult my friend and colleague Maureen Stone, the author of A Field Guide to Digital Color and long-time researcher in the field of information visualization. When I asked Maureen about the battery life issue, she said the following:
On an LCD display, the pixels fundamentally act as shutters for the backlight, which is on all the time whether the screen is black or white. If you want to save power, turn down the brightness.
Even if some forms of mobile displays operate in a way that preserves battery life when the screen is black, does it make sense to sacrifice usability for the sake of a little extra time between charges? Clearly, makers of e-book readers wouldn’t consider this a worthwhile compromise.
This leaves us with argument number 2 above regarding lighting conditions. To test this informally, I took my new iPad outdoors to view it in different lighting conditions, including direct sunlight, and didn’t find that a black background was less annoyingly reflective. In fact, the opposite appeared to be true. The black background acts like a mirror, providing a surface that is reflective enough for checking my teeth for stray flecks of green after a meal. I didn’t want to rely on informal observation alone, however, so I consulted Maureen about this. Here’s her response:
The glass is reflecting the ambient light. It doesn’t matter what the screen is emitting. The value that reaches your eyes is the sum of the two. The variation in the reflected light is much more obvious and distracting on a black screen than a light one because the contrast between the images created by the reflected light and the background is less when the background is white.
What Maureen described in the last sentence is the mirror-effect that I noticed when I informally observed the glare on my iPad.
As an expert in this field, Maureen shared a few general thoughts on the topic as well:
In general, I recommend a light or white background because that gives your visual system a constant place to focus and also controls your white adaptation. A fundamental part of color vision is perceiving colors relative to the current “white.” If you have colored text floating on a black background, it can feel less stable and in theory, you can get some differences in color perception as your adaptation shifts. You can also create focus problems: An extreme case is intense red letters on black vs. intense blue ones on black. You can’t really get both in focus at once because of chromatic aberration in the eye’s optical system. This is easy to create on a CRT, less so on an LCD.
Another way to describe it is that a white background gives you more a feel of a constantly colored surface with text and figures on it, more like reading off of paper, and our visual system is more designed for this sort of viewing. I generally use this as the basis for my recommendation to use a light background.
Maureen did mention two situations when a dark background makes sense.
However, if you are using a display in a dark environment, it’s better to use a dark background as it lets you keep your eyes dark adapted. That’s why controls for airplanes and GPS units for cars switch to a dark background at night. Usually, however, the results don’t look like symbols and text floating in the darkness of space…there’s still a sense of there being a dark surface to ground the view. So the concerns above are somewhat mitigated.
I’ve seen recommendations that white on black is better for aging eyes, and for people with low vision because it reduces the amount of light scattering and distorting the image.
She completed her thoughts with the following:
Modern displays are now bright enough that they can be uncomfortably bright. But that effect will be seen in a dark room, not in daylight. Our visual system overall adapts (adjusts its sensitivity) to the ambient brightness by several orders of magnitude. That’s how we see in a dim room and in full sunlight, and that adjustment is the reason you are momentarily blind when you walk into a dark theater after being out of doors, or painfully squint on the way out. If your display is bright enough to be significantly brighter than anything else around it, then you’ll find it uncomfortable. But we cover this by saying you should use a dark background when in the dark. And turning down the brightness remains an option for leaving the background white. Many mobile devices automatically adjust the brightness as a function of the ambient light…brighter for brighter rooms, darker for darker rooms. Saves both battery and your eyes.
There might be more to it than this. Perhaps other conditions besides those that Maureen described can benefit from dark screens, but we should determine this through research rather than following the latest fad. Visual perception can be tested using the methods of hard science. Put your trust in best practices that are based on scientific evidence. Until evidence exists, trust your own eyes. There’s a lot that you can tell just be opening them.
Take care,
25 Comments on “Black or White: What Color Works Best for the Background of a Screen?”
This short article references some foundational research on how dark text on light background is better for readability, especially sight-impaired folks:
http://blog.tatham.oddie.com.au/2008/10/13/why-light-text-on-dark-background-is-a-bad-idea/
Most data displays contain some text as well as figures/charts. Moving between light and dark background requires adaptation, as Maureen mentioned. So, there doesn’t seem to be any justification for saying that figures/charts are fundamentally different from text.
And a number of other studies of various types:
http://www.laurenscharff.com/research/reslvs.html
Having worked for a number of years with green or amber screens in a lighted computer room, I would not want to go back. If I were presenting charts in a darkened room I’d consider a dark background. And if I were making a horror film I’d definitely use screens with dark backgrounds. Much better for seeing zombies that are coming up behind you, obviously.
There is truth to the statement that black pixels can use less energy on certain screen types, including cell phones:
http://en.wikipedia.org/wiki/AMOLED
LCDs use consistent power regardless of color. Brightness is key there as mentioned.
Research into black or white screens is probably of lesser importance given the fact that LED-backlit screens do suppress a key sleeping hormone probably causing long term stress-effects to arise.
http://jap.physiology.org/content/110/5/1432.long
My assumption was that they were they were (to some degree) aping the Bloomberg Terminals interface:
http://www.bloomberg.com/professional/files/2012/08/Bloomberg-Charts.jpg
There is an good article on why, despite the fact it’s pretty baffling and inefficient, its seen as a selling point to its users
http://uxmag.com/articles/the-impossible-bloomberg-makeover
Great article. I’m fairly certain that “Bright colors on black screens look cool” is the only honest answer. At least if we can admit that this is the reason we are doing it, we don’t create false cases for it.
I was very interested about the battery usage point, because this was a theory I came up with for the black-screen trend, which is now thoroughly disproved.
This is a very complicated subject that has a lot of contributing factors which need to be taken into account based on the contexts of uses (task and environment).
for instance from a signal processing perspective,
illuminated white = all of the rods and cones of your retina sending signals to the brain.
darkness = neurological silence
so when presented with a black dot in a white field, its like trying to hear a silent voice in a room of shouting people. When presented a white dot in a black field, its like listening for the one person who is whispering in a silent room. In reality, the brain doesn’t actually deal with individual signals but rather broader groups of patterns, so its not quite as simple as that, but its a good illustration for reference
in addition, as noted in the post, if the room is dark, a bright screen can create a “flood” of light that reduces the ability to see content effectively because of the contrast difference in available light between the screen and the surrounding environment. So dark environments should have darker backgrounds. However, if you are in a brighly lit environment (like in the full sunlight), the background needs to be equivalently bright and so a white background is needed.
Then there is the issue with contiguous or non-contiguous information. Colours on a dark background have more visible contrast range than on a white background. So if you are presenting heterogenious content (like a complex dashboard with lots of different types of information) that has lots of signalling of state or change of state involved, it is easier to pick up on the state changes through colour alone than it is to do the same on white.
Then there is just the issue of habit and preference. People reading content tend to have a comfortable reference to the printed page and so feel like it is easier to read dark text on white than the other way round, even if there is no real difference in perceptual efficiency. However, people looking at photographs often prefer seeing them on a black background or grey because it makes the individual photos stand out more effectively (just ask any photographer).
So the problem here is that there are a number of factors that come into play at any given time that determine what the best course of action is. There is no absolute right and wrong…and where I work we maintain a light and dark version of our interfaces to enable us to use either. But it is interesting that black is often chosen by users in user testing in our world where visual data analysis is being done (charts, graphs, ticking data streams, status lights, etc.) because they find it much easier to see at a glance what is changing and in what direction. However, they almost always want a white interface for reading content.
I have users who sometimes print dashboards/reports/whatever. Paper is cheap, but the black backgrounds are a real drain on toner.
As long as we’re talking about displays for dark lighting conditions, it’s also best to use a monochrome color on a black background (traditionally red.) Your eyes perceive it as nearly as bright as white, even though it’s producing less light and helps to preserve your night vision. Astronomers carry around red flashlights for exactly this reason, and darkrooms have a red light.
I don’t know that red is necessarily better than other colors. My daughter has a green LED light in her closet, which works really well if I need to poke around in her room at night without waking her or disrupting my night vision.
Red filters are used on flashlights aboard Navy ships at night, as well. The stated reason was that the red light does not carry as far, so cannot be seen by enemy ships/aircraft.
“Many mobile devices automatically adjust the brightness as a function of the ambient light…brighter for brighter rooms, darker for darker rooms.”
(Possibly irrelevant) Anecdote alert: my laptop did this. I found it extremely annoying and had to turn it off (the feature, not the laptop). Couldn’t concentrate at all when the screen kept fading and I was trying to read. I don’t know if it would have been less annoying if it had been a continual process rather than one that happened in big discrete steps. Or how much worse it is on a laptop than a phone (not sure where the sensor for it is).
Incidentally (and relating to the comment in the first paragraph rather than the bulk of the article), one of the selling points of the new edition of Mathematica – “renowned as the world’s ultimate application for computations” – is gauges:
http://www.wolfram.com/mathematica/new-in-9/gauges/.
Apparently you can “[c]reate efficient dashboards by using dynamic arguments to gauges”.
Great article.
Of late we can see slideshows of photo album when displayed in fullscreen mode uses dark background.
Is it fine to display in such a way irrespective of considering the case whether the environment is dark or not?
Ages ago, almost every cad software used a black or dark background for wireframe representation. Antialiasing was by that time not that popular as it is now or worked better for darkscreens and low resolutions. OpenGL scenes were rendered with dark background or with some photographic textures for light effects. These days, a simple search for “cad model view, wireframe” on images on web will find still enough black or dark backgrounds for the current cad systems.
If this is the source of inspiration for dark background design, I cannot say, but personally I never had the feeling of designing any dashboard with dark or any texture background, even for mobile devices. However, several people do like dark background, so I guess, eventually is a matter of taste. For printing purposes, for sure this is not a good option.
Danz,
I wonder if the legacy of blueprints influenced the use of dark backgrounds in CAD drawings. Blueprints, of course, don’t use a dark background because it works best, but simply because of limitations in the technology.
Jayakrishnan,
Because of the vast range of colors that appear in photos, many of which are light, a dark background probably provides the best contrast in general to clearly define the borders of a photo. I just opened iPhoto and found that it uses dark gray as its default background, which seems to work well.
Thanks for this article which I will need to file away for when some executive sees a chart on black and wants us to switch all our reports over to the latest and greatest fad.
As Steve Fenton pointed out, I think cool is a huge factor. The LCARS (Star Trek) has a black background, as do most sci-fi movies.
With AMOLED screens there’s significant battery savings involved turning pixels off.
Black text and graphics on a white background is simply what we’re used to, and that because the most commonly available pigments for ink were dark and the greatest contrast (readability) would be a white, or near white parchment.
It will always be the case that the greatest contrast available will be between black and white.
That said, the applications you’ve used for this article have useful information in the intensity of the colors on the graph, in the gradual reduction of opacity toward the x axis, and in the bright white line. I see nothing at all wrong with this presentation for readability. I suspect contrast potential would be diminished if the background were, for instance, violet. I also suspect that some of the features of the graph, particularly the opacity, would be less useful against a white background.
Black is, therefor, no LESS illustrative than a white background and, in some cases more desirable.
Black backgrounds make sense on AMOLED displays since black pixels do not consume energy.
Thomas,
While an increase in the longevity of a single battery charge is an advantage of black screens on an AMOLED device, does it outweigh the perceptual advantages of a white background? Also, what percentage of mobile devices use AMOLED technology. Unless I’m mistaken, Apple products do not employ AMOLED displays.
Jim,
Your suggestion that we prefer black text and graphics on a white background simply because we’re used to it is a hypothesis, not a foregone conclusion. Do you know for a fact that white backgrounds provide no perceptual advantages? Even though the same amount of contrast exists between a white foreground on a black background and a black foreground on a white background, there is a great deal more to perception than contrast. As Maureen Stone’s comments suggest, white backgrounds appear to offer advantages that are suited to our visual systems. We perceive colors differently in a field of black (darkness) than in a field of white (lightness).
Great article, I am throwing in my three cents:
– To my understanding: with active-matirx LCD screens displaying “black” does not consume less power, as the necessary backlight is always ON, see also: http://en.wikipedia.org/wiki/Backlight
– Energy savings for AMOLED screens (such as Samsung S3 devices etc.) should not be a primary visual design factor
– Black backgrounds on a mobile device, which has a black frame, looks cool as it blurs the screen with the physical frame of the device.
Interesting post. I’m a little late to the conversation, but I have always liked a black background, and can’t resist commenting. I too grew up on original PC monochrome monitors, with a green text on a black screen. When color monitors and applications like PageMaker that used black text on white arrived, I really disliked them. Party because the early technology was not great, and a white background tended to shimmy around all over the place.
My feeling at the time was that attempting to use black text on white background was a ridiculous attempt to make the PC desktop look like a sheet of paper, which it isn’t. One big difference of course is that a monitor is viewed via emitted light, while a piece of paper is viewed via reflected light. I still think it is a very big difference, and as a programmer and writer who spends many hours a day in front of the monitor, I still use green text on a black background. I think it is easier on the eyes if the most of the screen space is not lit. If you notice most commercial signage is light text on dark background, and movies and TV shows always use light text on a dark background for the credits, titles, etc.
All that being said, when viewing a PDF file I want to see it with black text on white background, probably because a PDF is supposed to be a visual representation of a piece of paper.
Anyway, regardless of my personal, anecdotal experience, I have little doubt that you are indeed correct that the current trend on mobile devices is pure fashion.
Most modern Symbian devides have AMOLED and as a result, OVI store apps are much more likely to have white on black displays. As a result, for the reasons you’ve stated, Symbian apps are much harder on the eyes