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]