Black on White: Good; White on Black: Bad
I have a confession to make. About ten years ago, I was webmaster for a major photo agency here in New York. My first task was designing their first ever web site. We had lots of great photographs going back decades, and we decided that the best way to display them would be with white text on a black background. Why did we decide this? Because photo galleries have black walls.
Now if you’ve ever been in a photo gallery, you’re jumping out of your chair right now to comment and tell me that, no, photo galleries don’t have black walls. They have white walls, and rightly so. White walls accentuate the photos better. I know that now. I didn’t then. I don’t know where we got the idea that photo galleries had black walls. It was a stupid mistake. We eventually corrected it, and I promised myself never to make that mistake again.
I don’t feel too bad about it. It was the early days of the Web, and there were designs out there on sites in those days that were a lot stupider than anything I came up with. But tell me why, ten years later, have some designers still not gotten the message that white text on a black background is hard to read? Can’t we finally banish this ugliness to the dustbins of history where it belongs?
The latest example is a perfectly nice blog called Birdchaser. This is one example of a design you’ll find a lot on Blogspot. The site is written by Rob Fergus. He’s good writer and a good birder. I don’t think he’s a professional web designer, and in any case he shouldn’t have to be. Here’s another example from M.P., a New York cab driver.
You’ve doubtless seen this design before. It’s one of Blogspot’s default templates, specifically Minima Black created by Douglas Bowman. Unlike Fergus and M.P., Bowman is a professional web designer, and he really should know better. Scanning some of his other templates, most aren’t much better. Minima Blue, Minima Ochre, Rounders 4, No. 565, and No. 897 aren’t quite as bad as Minima Black; but they all share the characteristic of too dark background colors with less than legible text. Of Bowman’s numerous designs only Rounders 1, 2, and 3 seem reasonably legible. I wouldn’t call them gorgeous, but at least I can read the text without squinting.
A request to Blogspot: please stop offering these hideous, illegible themes to your users. And a request to web designers everywhere: Flash and MP3 not withstanding, the Web is still basically a text medium. Always consider whether the text on your site can actually be read. The design is supposed to accentuate and enhance the text, not hide it.
April 3rd, 2006 at 8:49 am
Young eyes can read even the most illegible text with a minimum of contrast. This is why all my slide presentations are stark black text on stark white backgrounds. Si jeunesse savait, si vieillesse pouvait….
April 3rd, 2006 at 9:49 am
I’ll have to strongly disagree with you on this one. White background may be better for displaying photographs but it’s definitely not easier on the eyes. My eyes noticably relax when I switch tabs to the websites you mention above. Staring at a page with a bright white background is not just like staring at a lightbulb all day long, it IS staring at a lightbulb all day long.
My old text editor is configured with a black background and various bright light colors for the foreground and has been for many years. I primarily use Eclipse now and I have it’s background set to a pale yellow background so that it’s not so bright. I would configure it with a black background too but when I last attempted to do so, there were some bugs that prevented me from setting all of the other colors I needed to contract the black. I think I’ll have to see if that’s been fixed now.
April 3rd, 2006 at 10:42 am
I think it may be a matter of personal need (I don’t believe it’s a preference) but I find the white background overwhelms my senses and makes for reading text a harsh experience. Maybe it’s my age, maybe the state of my eyesite, but this is not something that can be simply stated as an axiom of Web design or computer usability that one is right and the other is not.
Also, I don’ think that there’s an absolute between the “real” world and their computer analogies. White walls in a real photo gallery do more than accentuate the pictures. They offer reflection of real light that produces effects in the real world that a white display background can not do.
My $.02 worth. You can have it for free.
bill
April 3rd, 2006 at 11:58 am
With a dark background, the white text never looks white enough — it sort of looks like the “whites” of those who don’t use “New and Improved Tide” or whatever. That’s my big problem with white on black (or other, similar color schemes). The print loses the necessary contrast.
In theory, white on black on a computer screen should be better than the reverse because the illumination of a white background shining on your eyes is fatiguing: a computer screen doesn’t reflect light the way a newspaper does, it creates it. What I find, additionally, is that the lights in the room where my computer is kept appear reflected in my computer screen, if the screen is black, and this is just as bad, if not worse, than the “dirtied” text.
I think ERH is correct.
April 3rd, 2006 at 4:28 pm
I agree that readability is important to good design. Perhaps a white background does work better most of the time for web pages but for myself, I agree with Brian: dark (read “dull”) backgrounds with bright foreground.
In all the years I’ve been coding I have always preferred a dark background with lighter text. My FreeBSD workstation is set up just so, as is my xemacs colours. I can work in front of such a setup 12 hours a day or more without any eye strain whatsoever. However, I can actually feel the difference when I look over to any screen (eg. my Powerbook) where the background colours are brighter, such as in Firefox or Thunderbird. Staring at a screen like this for several hours gives me a headache.
While we all write and use white paper on our desks, that is reflected light, not radiated light like that coming off our screens.
April 11th, 2006 at 8:59 pm
I have paradoxical tastes in that I find it easier to read black text on a white background but I often find the intensity of the white light uncomfortable, so I turn the brightness ALL the way down and keep contrast below half, which I always have to undo to watch a movie on my computer.
Conversely, I find white on black harder to read but much more comfortable.. :/
April 21st, 2006 at 10:24 pm
Actually, many studies have shown that light text on darker backgrounds is easier to read. The reason that books are printed black on white is that white paper is easier to make and pages of mostly black ink would cost a fortune.
April 27th, 2006 at 8:55 am
Firstly, a gallery and a monitor are 2 completely different things. Galleries tend not to be black because that would create a big sense of claustrophobia.
A computer screen isn’t covering your entire world – it’s just a 17 inch rectangle in most cases so black doesn’t have the same effect in such a small scale as it does in a real 3 dimensional environment.
As for being harder to read, well I agree for the most part black backgrounds actually reduce strain on your eyes – especially with TFT monitors which tend to be have bright whites.
Anyway, I wouldn’t beat those sites up too much about black – especially not when you have a 1000 pixel lime green gradient at the top of your page 🙂
May 2nd, 2006 at 12:05 pm
What even sillier is that we should have to care. Why should that be? Why can’t we just define content, and leave display options to the user?
Corporate logos? Render ’em how I say. Big block of text? Hey, you render that however you like, whatever gets you to read it.
May 8th, 2006 at 8:41 am
One acronym for you: YMMV. Taking a hard stance on this doesn’t make much sense: the world isn’t black or white (pun intended 🙂
Moreover, some people with very good eyesight don’t have your stance on that subject at all.
To me, it’s not black on white VS white on black. I hate white on black and I hate black on white. I think black on white kills my eyes. From day one when I configure a new system, I change all apps I use regularly to use a light-gray background instead of a white one (easy fix, for example, for a spreadsheet or a word processor). Way more friendly for my eyes (mid-thirties, still 10/10, no glasses, no lens, staring 8 hours+ a day at a computer screen since more than 20 years). If you’re coding black on pure white, you’re killing your eyes.
For coding, I use a font “made by a programmer, for programmers” and an IDE whose editor is configured to use light color foreground on a darker color background, but without much contrast (told you: mid-thirties, eyes still perfect… Maybe because I’ve had such habits since 20+ years).
White monitor background kills your eyes, too much contrast (wether it’s white or black background) kills your eyes.
If you’re not convinced that it’s not “one size fits them all”, here are some color scheme (warning: (X)emacs Lisp code 🙂 :
http://www.cs.cmu.edu/~maverick/GNUEmacsColorThemeTest/index-el.html
You’ll notice some highly contrasted scheme, but also some lightly contrasted scheme, for people who haven’t killed their eyes yet and who’d like to keep them for as long as possible.
Books are a whole different story: substractive != additive. The brain doesn’t perceive light emitted by a monitor (wether it’s a CRT or an LCD) in the same way that it perceives light reflected on a book page. For example, no matter the settings, it’s more relax to read a 300 pages book than a 300 pages pdf on a screen.
The point about real world photo galleries is completely moot too: substractive != additive once again, for a start.
If you’ve worked with professional photographers, then you may have noticed that many have “books” to show
samples of their work that have… Surprise! Black pages. This is for example very common with photographers
still doing B&W photography.
YMMV.
May 16th, 2006 at 9:42 am
How are you going to criticize Douglas Bowman’s work on a site that appears to come from 1996?
White text on a black background is hard to read… but a 3,000 pixel high electric neon green banner with white, poorly aligned text isn’t?
May 24th, 2006 at 11:02 am
Actually you are wrong on the “Photos look better on white” too. I studied art at Cal Arts and the truth is, all colors are stronger against a black background.
July 10th, 2006 at 4:21 pm
I prefer white on black, yellow on black, acid green on black. All that white is just too harsh. Black is so nice and peaceful.
August 10th, 2006 at 2:51 am
I perfer a black background with red or green text. white backgrounds are garbage. its a lot harsher on the eyes. i only like white backgrounds when i’m shopping online or using a search engine.
February 27th, 2007 at 1:10 am
The intention of the article, i feel, is all about indicating the present UI standards which primarily insists using White as a background. More than “White” it is about a clutter free environment, which makes the user feel ease with the website. Since the success of Google UI, the white background has got lot more priority is my general feeling. As other users feel, it is more of the individual preference too, when it comes to color combination. All the issues about UI would play a more crucial role in business websites than personal sites. And that is the reason why i feel, Blogspot gives the black background choices to its users.
February 8th, 2010 at 8:20 pm
Being a web admin, I found my white text on black was driving away repeat visitors. I have to confess that the reason I picked that color scheme is because I find it easier to read. The question is; are there more people who avoid my site because of the white on black then people who don’t mind or prefer the darker page?
After reading Mr. DeWeese’s comment I decided to change the theme of my text editor. Since I spend more time looking at that screen then I do reading my own site.