Is Dark Text on Light Background the Superior Choice?
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.
Related Posts:
October 9th, 2007 at 11:39 am (6486) [Quote]
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.
Posted usingOctober 9th, 2007 at 11:59 am (6488) [Quote]
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.
Posted usingOctober 9th, 2007 at 5:00 pm (6492) [Quote]
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
)
Posted usingOctober 9th, 2007 at 5:57 pm (6493) [Quote]
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.
Posted usingOctober 9th, 2007 at 6:33 pm (6496) [Quote]
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
Posted usingOctober 9th, 2007 at 10:05 pm (6497) [Quote]
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.
Posted usingOctober 9th, 2007 at 11:18 pm (6498) [Quote]
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.
Posted usingOctober 10th, 2007 at 2:48 pm (6507) [Quote]
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.
Posted usingOctober 11th, 2007 at 3:30 pm (6530) [Quote]
I wasn’t saying that busier is better, quite the opposite - clean and understated FTW
Posted using