11

Many websites that are designed to be easy to read (eg. nytimes.com or ilovetypography.com) use white backgrounds with black fonts to make the content easy to read. Is it necessary to only use light colors for high-content areas or can darker colored backgrounds be equally readable?

4 Answers 4

14

Dark backgrounds are generally considered to be less readable than light backgrounds. A sufficient level of contrast is also very important to readability.

In general, I would recommend dark backgrounds for designs that have a large amount of media content, but very little text. Darker backgrounds can really make photographs stand out and you'll find many photography sites will have a black background.

If you have a lot of text, however, you should use a light or white background. It's easier on the eyes and it mimics what we're used to when we're reading newspapers or books. You can also use light or white for media content, but it has a less artsy feel.

For further reading: Light text on dark background vs. readability

0
5

The main concern with this aspect of readability is contrast. White text on a black background contrasts the same way that black text on a white background does. White on black is actually easier on the eyes when viewed on light-emitting screens than black on white, because less light is being transmitted.

The black on white, or dark on light, style of most websites is attributable to the paper paradigm. People familiar with paper documents could easily recognize a word processor with a white background and black text, for example, and that became the norm in computing. In my opinion it's really a shame; I hate staring at my white screen all day and damaging my eyes.

Edit: Re-reading this now, I should emphasize that I personally find the amount of light blasted at me by white websites to be uncomfortable. I use black backgrounds wherever possible and don't have any issues with readability. The other answer indicates that this may not be the norm.

5
  • 3
    I'm not sure "White on black is actually easier on the eyes when viewed on light-emitting screens ... because less light is being transmitted." is true. If I was in a very dark room, perhaps; but the white on my screen is adjusted so it's approximately the same perceived brightness as a piece of white paper on my desk, and I believe that when I repeatedly look from one to the other, my eyes have to adjust less.
    – e100
    Commented Jan 7, 2011 at 14:27
  • That's probably possible. I certainly didn't mean to suggest it couldn't depend on other factors. Commented Jan 7, 2011 at 17:59
  • 1
    On the flip side, when I read light text on dark backgrounds, I personally have burn-in (after-image) issues and find them unreadable.
    – horatio
    Commented Dec 13, 2011 at 21:11
  • @e100: I'd guess your screen is either extra dimmed (I'd say about 60-70 cd/m²) or light on your desk quite bright, or both :). Anyhow, I'd definitely agree that pupils will have little to do in that case if moving back and forth between printed and displayed text.
    – thebodzio
    Commented Dec 13, 2011 at 23:27
  • @MatthewRead: I'd rather say "luminance".
    – thebodzio
    Commented Dec 13, 2011 at 23:34
0

I'd say: let the people choose the right combination for them. Some prefer bright on dark, other dark on bright – it's hard to say which one is better, even if one does some scientific survey on that. Besides, preferences might change as the viewing conditions does. Simple theme switch would be invaluable – not everyone use their own CSS stylesheets. BTW, the couple of papers I've seen about that matter are based on rather short text samples – about a couple of thousand words. It would be interesting to see what happens when text is longer, like a book with about 5 chapters, several thousand words each.

The other answers mention contrast as main factor of readability. I think it's unfair to separate contrast from total luminance while considering this problem. Linked article on bereastreet quotes that "…White text on a black background is a higher contrast to the opposite…". I can more or less agree with the rest of quotation, but this is just plain rubbish :). The contrast, understood as a difference between coolors, is exactly the same. It's the total luminance that's different. Such statement can be accepted only if we'd define something as "perceived contrast". I also think viewing conditions are critical for the convenience of reading. What works nicely in bright light can be painful when sorrounding is dark.

One thing, I think can't be stressed too clearly and firmly about contrast itself is that it should be "right" ammount of it. Not only "sufficient", but also "not to much". I work at the small publishing house and more that often I see poeple choosing bright as hell (POW moved to the blue) paper for their books counting 150+ pages. It's their right as the customers, frequently supported by a claim that "it's easier to read, especially for older (sic!) people, nice, black text on bright, white paper". At the same time I'm doing my own unofficial survey among people who read a lot. All of the asked said that overly bright paper is killing their eyes. Often they go for the older issues – the ones that had their chance to turn "yellow" ;), just to be able to read them comfortably. I think the same is true for the displays. Enough contrast – yes… just not too much of it.

And one more note: when I mention reading text on paper (and paper bright as hell ;)), as a viewing conditions I assume fluorescent light, about 2800-3200 K.

0

Putting aside the already well covered issues of readability the target audience of your website plays an important function here. Some groups will respond better to a dark background while others prefer a light background. Hard to give examples of what style suits which audience though as it's highly subjective.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.