Dark Background Manifesto

The Problem

Long ago, back before the age of time, display technology was in its infancy and your background was dark and your content was a glowing monochrome. And all was good.

As time progressed, displays and hardware advanced and became able to display content in a wide variety of colors. At first technology was still limited to simple characters and thus the characters acquired foreground and background color. The dark background bliss was beginning to falter.

Then came the graphical displays. Able to display pixel accurate imaging, these displays invited much exploration into the world of human and computer interaction. At first these displays were monochrome and gray-scale but soon full color was available. And the backgrounds... oh how they did suffer!

And here we are today. There are full color, high resolution, high contrast displays that can nearly blind you at full power. These displays are used for desktop computers, notebook computers, PDAs, mobile phones, oscilloscopes, projectors and any number of other applications.

Back in the day, the world was full of green and orange phosphorescent looking displays. You had no choice for your text color. Sometimes backgrounds were bright for emphasis but rarely the whole screen. Even with early text screen word processors this was the case. Bright background was again used for emphasis. Then along came the graphical displays from various vendors. And what do they do? They make the background bright white and the text black and use fancy graphical means to provide text adornation. Other than some hold-backs from some text based console applications this black text on white background has continued to today.

The world wide web has also had a similar change. In the early days the browsers displayed black text on top of a gray background. Now most all browsers default to black foreground and white background. There are of course many sites that choose their unique color stylings but that is to override the defaults. Even many web designers assume black text on a white background. If you don't believe me change your defaults and surf around. You'll find many sites that don't set explicit background and foreground colors and they look horrible. Many web designers also make this assumption for their images. They use white backgrounds that are supposed to fade into the page background but look awful on top of gray. In many cases, image formats with transparency would solve this but there is resistance to ensuring everyone has this properly implemented.

Why do software application and web site creators use a white background? I don't know for sure but I'm guessing it was to make people feel more comfortable. Everyone is used to white standard paper, off-white newspaper, white background in magazines, most books, and so on. Printing black on white is just technically easier and cheaper.

Why do dark backgrounds matter? A minor reason is personal preference, which is what most people are thinking at this point. But that's just a small concern. I'll discuss the main reasons.

The first is your eyes. Yes, those things you are reading this with. Think of the background as, well, background, and the text as a signal. Your eyes are trying to read the signal and ignore the background. From an energy perspective let's simplify and say dark colors are low energy and light are high. So with a light background you are flooding your eyes with a high intensity wall of noise and trying to pick out the low intensity dark text. With a dark background you instead change the important text to the high intensity signal. If that didn't make sense then think of it as a looking at the stars. At night your eyes open up and you can pick out the faint signals of a star from light years away. Imagine trying to pick out faint black dots on a bright sunny day sky.

A secondary reason also associated with your eyes is eye strain. This can come from at least two sources. The first is the effort to pick out the weaker dark text signals as described above. The second is viewing such displays in dark environments. Try using a regular word processors with white background and black text in a pitch black room. Now try with a black background and white text. Your eyes try to adjust to both the room environment and to the screen you are looking at. To those that prefer or must work in bright environments this is less of a concern. For those who are in dark environments, it is almost impossible to handle the brightness without turning on a background room light. In some cases, such as with portable devices, this is not possible and the only option is turning down the display backlight which lowers the contrast and readability between background and foreground significantly.

The third reason dark backgrounds are important is energy. It takes a lot of energy to make pixels bright. In general, a text interface is using many fewer pixels to display the important text information than the background. So a dark background is much more energy efficient. This is extremely important for battery powered displays in notebook computers, PDAs, mobile phones, digital cameras, and so on. Even on desktops the power required to drive a large display with a full white background is much higher than with a dark background. If you don't believe me, buy a cheap inline power meter and test it yourself. Lower energy will save you money, stop power companies from needing to supply you, and in the end, save the environment. You do love the earth don't you?

The Solution

Use a darker background and a lighter foreground.

In the News

Links

FAQ

Q: Do you have an example of a dark background compliant web site?

A: Why yes, there is an excellent example here.

Q: What colors would you suggest?

A: I suggest good contrast between a reasonably bright foreground and a reasonably dark background. My beta testers claimed that wheat on black on this site was too hard to read. I disagree but that's not the point I'm trying to make here and it was just too ironic they couldn't read this content due to color choice. White is bland so I switched to snow on black.

Q: Why does your page look bold compared with a black on white page?

A: Interesting you ask. I've got two setups and definitely notice the difference as well. A test using the same font and switching white and black foreground text colors yields different results with different platforms. On an Apple PowerBook LCD, Mac OS X 10.4.6, and "Medium" font smoothing setting the result is all white text is noticeably more bold. On a Dell desktop LCD, Debian, Linux, GNOME, X, and "Best shapes" vs "Subpixel smoothing" the result is white and black text both have the same apparent weight. The "Best shapes" method is just using anti-aliasing and the "Subpixel smoothing" uses subpixel rendering. However, both methods yield nearly identical acceptable results.

The cause of the difference is almost certainly the use of subpixel rendering. I'm not sure what algorithm Apple uses vs what GNOME and X use. They are visually different enough to cause this bolding issue. If you know, let me know.

Q: Is anything on this site based on scientific fact?

A: I don't know.

Contact

Please send comments, suggestions, praise, flames, and donations to David I. Lehn dil@lehn.org.

Web Site

Content & Source

The content of this site is available under the Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.

In case you care, here's the site content, HTML, sed script, CSS, and Makefile. The site source is available under the MIT License.

Revision Log