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
-----------
- 2007-08-09: [Is Black the new Green?][news20070809-0]
- 2007-08-12: [Five Myths and Mysteries About Black Web Surfing][news20070812-0]
- 2007-10-20: [Lights Out SF @ Google][news20071020-0]
- 2008-03-29: This site is proudly participating in [Earth Hour][], as always,
every hour, every day.
- 2009-10-23: [Colors on your website may be a migraine trigger][news20091023-0]:
A migraine inducing page (due to auto-play video ads and popup junk) that talks
about web page colors. A comment links to a [tool][news20091023-1] to fix
your colors to black on white. But the interesting part is they link to
**this** site as site to test the tool on! I'm so proud.
- 2012-04-27: [Blackle vs. Google Monitor Power Consumption Tested][news20120427-0] (via [Power-Saving Web Pages: Real Or Myth?][news20120427-1])
[news20070809-0]: http://googleblog.blogspot.com/2007/08/is-black-new-green.html
[news20070812-0]: http://www.treehugger.com/files/2007/08/ten_things_you.php
[news20071020-0]: http://www.google.com/lightsoutsf/
[Earth Hour]: http://www.earthhour.org/
[news20091023-0]: http://www.blisstree.com/articles/colors-on-your-website-may-be-a-migraine-trigger-276/
[news20091023-1]: http://www.456bereastreet.com/archive/200608/light_text_on_dark_background_vs_readability/
[news20120427-0]: http://www.pcstats.com/articleview.cfm?articleID=2649
[news20120427-1]: http://tech.slashdot.org/story/12/04/19/2026252/power-saving-web-pages-real-or-myth
Links
-----
- [Blackle][]
[Blackle]: http://www.blackle.com/
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][WebColors] 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][WebColors] on black.
[WebColors]: http://en.wikipedia.org/wiki/Web_colors
### 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][SPR]. However, both methods yield nearly identical
acceptable results.
The cause of the difference is almost certainly the use of [subpixel
rendering][SPR]. 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]().
[LCD]: http://en.wikipedia.org/wiki/Liquid_crystal_display
[SPR]: http://en.wikipedia.org/wiki/Subpixel_rendering
[anti-aliasing]: http://en.wikipedia.org/wiki/Anti-aliasing
[Apple]: http://www.apple.com/
[Mac OS X]: http://www.apple.com/macosx/
[Dell]: http://www.dell.com/
[PowerBook]: http://www.apple.com/powerbook/
[Debian]: http://www.debian.org/
[Linux]: http://www.kernel.org/
[GNOME]: http://www.gnome.org/
[X]: http://www.x.org/
### 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 .
Web Site
--------
#### Content & Source ####
The content of this site is available under the [Creative Commons][CC]
[Attribution-NonCommercial-ShareAlike 2.5 License][CC-By-NC-SA].
[CC]: http://www.creativecommons.org/
[CC-By-NC-SA]: http://creativecommons.org/licenses/by-nc-sa/2.5/
In case you care, here's the site [content](content.txt), [HTML](html.html),
[sed script](include.sed), [CSS](screen.css), and [Makefile](Makefile). The
site source is available under the [MIT License][MIT].
[MIT]: http://www.opensource.org/licenses/mit-license
#### Revision Log ####
- 2006-06-08 - 1.0 - Initial publication.
- 2006-06-09 - 1.1 - Wheat to snow.
- 2006-06-09 - 1.2 - Display issues and facts FAQs.
- 2007-08-12 - 1.3 - Added "In the News" Section.
- 2007-10-22 - 1.4 - Add links and more news.
- 2008-03-29 - 1.5 - Add Earth Hour news.
- 2009-10-23 - 1.6 - Add migraine article link.
- 2012-04-27 - 1.7 - Add /. article link.