There are two fundamental schools of thought when it comes to web design. You can talk about different design methods, technologies, paradigms and etc but there is one very simple, binary choice that you have to make when deciding on the color scheme will have a huge impact on just about every other design aspect of your site. You have to choose to use:
- Dark text on light background (like this site for example)
- Light text on dark background
Everything else, kindoff ties into this choice – and there is not much in between. You can’t really pick the middle ground because you want to have fair amount of contrast between your text and your background. And both choices require slightly different design approaches – same layout or graphic may look great in one, but crappy in the other.
I always considered #1 to be the more professional looking, and reader friendly choice. For me, the stark contrast between light colored letters on dark background puts much more strain on the eyes, especially when reading long paragraphs of text.
Sometimes of course it might be appropriate. For example if you are making a page that is supposed to convey some dark, scary or melancholic mood. But even then you have to tinker with the color scheme a bit to avoid that jarring effect on white text on black background. Most terminals don’t even use that, opting for more subdued grayish hue to spare you the eye-hurt.
So I always assumed that dark text is the superior choice – this is, after all, how we print most books, magazines and etc. It seems easier on the eyes, and more accessible to people with visual impairments. And I’m not pulling this last thing out of my ass. Check out this article on web design from Whichita University – it actually quotes an actual research that tested this hypothesis by working with the elderly. Here is the relevant quote:
Studied examining the reading performance of older adults have found that colored text on a colored background typically reduces their reading performance compared to reading black text on a white background (Charness & Bosman, 1990). Moreover, research has shown that dark text on light backgrounds is generally superior to light text on dark backgrounds (Tobas, 1987). However, older adults do have an increased sensitivity to glare. Thus, it is recommended that backgrounds not be pure white, but some form of off-white color.
Lately though I’ve been hearing many people saying that if done well #2 works well, and does not really impair readability. I heard this from both web designers, and accessibility experts which really surprised me. So I did a little bit of searching and it seems that opinion on which design scheme is better is deeply divided. To contrast the research mentioned above I can easily quote an article by Lighthouse International organization (which specializes in accessibility issues) which openly advocates the light on dark scheme:
There is good evidence that for many readers who are older or partially sighted, light (white or light yellow) letters on a dark (black) background are more readable than dark letters on a light background.
So it seems that it’s a tossup – both from aesthetic and from accessibility point of view. Which one do you prefer? Let’s do a vote:
Personally I like dark on light because it lends itself to cleaner and more professional looking designs.
[tags]web design, light on dark, dark on light, text, readability, lighthouse international[/tags]
I don’t care for Light text on a dark background, i find it basically unreadable. It makes my head hurt and my eyes get all blurry esp if I am tired. If it is something i wanna read I will often highlight it or copy and paste it to another application.
Btw – I noticed that I light on dark pages are less workplace friendly. Note that most documentation sites, and useful crap that you could use as reference uses the dark on light scheme. The light on dark sites are usually bullshit entertainment crap and as such they draw more attention if for example your boss glances on your screen while passing by. :mrgreen:
Whitespace seems empty, so my eye goes naturally to the text. If the background is blacked out then the page seems fuller/busier and the text is harder to pick out from “the crowd”
I have a friend who used this to make it seem like he had more stuff in a folder full of art-stuff for school – black paper with stuff stuck to it looks more complete than if there are big areas of white left in the gaps.
On the other hand, sometimes if the text is very closely printed I find it easier to read if I highlight it (so it’s black on a light grey background) reducing the contrast. Alternatively increasing the font size restores readability. I think that’s caused by the text starting to turn into a big black blob on the page because the gaps of empty whiteness aren’t enough to properly define the letters.
Actually, the same applies with white text on black (in which case highlighting reverses the colour balance back to dark on light as well as reducing the contrast a little)
Meh, dark on light generally seems better, I’m going with my intuition on this one (my subconscious knows my eyes better than I do :wink:)
Well, you know that I am old school, so I prefer the lighter text on dark background. I am used to working in dark offices and found this to be a better combo.
Light on dark will help if your site affects an arty audience – beside the undaground stuff. Normal people scan websites – give’em – and (you) – a chance to detect the wanted content.
the polarizer
ps: nice site – now in my bookmarks
I looked through my portfolio and found I only have one site where I used light text on a dark background (and it was my own). This was done because it’s a photography website, with more photos than text, and I think the photos look better on a black background.
I find for smaller fonts I prefer dark on light, and for larger fonts (like a text console) I prefer light on dark. With small fonts, I find they’re clearer as dark on light, and larger fonts are readable either way, but a dark background = less glare. Likewise, if I’m reading dark-on-light as small fonts, I prefer the background of the non-text areas to be muted to reduce glare, a bit like the grey sidebars of this page.
Interestingly, the folks at Blackle have got themselves a curious idea, but it’s going to fail. The idea being that it takes more energy to paint white than black on monitors, so if everyone can be convinced to use Google with a black theme, then monitors left on google will use less energy. They quote some research somewhere that shows that across millions of users, the savings are not trivial, but unfortunately what may have been true in the CRT world is patently not true in the LCD world.
Heh, it’s funny that both me and Shamus Young of 20-sided decided to post on this topic on the same day.
@Matt` – I think you are right. Black does look busier – but that’s not always a good thing. For some reason I prefer websites that look open and spacious rather than busy and crowded.
@Craig – I don’t really like light on dark. I can deal with it on a terminal though, and even read an occasional manpage this way but for longer reading or edition I’d rather use light background with white text.
@polarizer – I noticed that most of the artsy pages are done light on dark. Then again, I’m not a very artsy person.
Someone said somewhere that light on dark is very good for emphasizing text – for example using light on dark boxes in a dark on light setting makes them stand out and catch attention.
@Chrissy – hey, nice page. You are right, most pictures do stand out more on dark background. Then again most picture sites (flicker, fotki, photobucket) use dark on light scheme so go figure…
@vacri – heh, funny you mention that. In my office, we have exactly 3 CRT cubes. And 2 of them actually came with the windows servers, and are off except for the rare times when I need to fiddle with the server manually. Everyone else has an LCD or two on their desks. So Blackle would not save us much money here. :mrgreen:
I wasn’t saying that busier is better, quite the opposite – clean and understated FTW ;)
For printed material, I definitely like dark on white. For computer screens, white backgrounds are like staring into a flashlight. At home and at work, the terminals and Emacs are all set to light on dark. Much easier on the eyes for me.
I also have a problem with having many eye floaters, especially right at the focal point. I’ve seen an optometrist about it, and he ran a bunch fo tests to make sure nothing serious was happening, which there isn’t. But there is nothing they can do about the floaters. When I read on a white computer screen background, the floaters at my focal point are very distracting. If it’s really being a problem during website reading, I switch to lynx in my black terminal. That way I can read in either style.
@ Chris Wellons: I just discovered on my Kindle for PC app white text on a black background — and this discovery has saved my life. I too have a problem with floaters that are getting worse with time, and it has made reading increasingly difficult. However, I don’t even see the floaters when using white text on black. I wonder how many people with this problem have thought of this solution? It should be more widely adverstised.