Why You Shouldn't Use White Text on a Black Background

25Jul2008

Inverted text is text that has been switched from the default black-on-white color scheme to white-on-black.  It is strongly suggested that you don't use this format of text for most printed materials - but what's the right thing to do for websites?.

Why Inverted Colors Are Not Suggested for Print

The following are some facts gathered by years of market research in the field of advertising: 

  1. Inverted text is proven to decrease readership by as much as 50%.
  2. Inverted text is exactly opposite from the format of text people are used to reading (black-on-white).
  3. Readers cannot easily focus on any one piece of text for a long period of time.

While inverted text may look "cool", it's obviously not the best choice for any text that you want your users to actually read. 

Why Those Rules Don't Necessarily Apply to the Web

One might expect the rules of print to apply across all media, but as we saw in our Font Analysls: Serif vs. Sans-Serif, the web is a significantly different medium with different rules.

The following are some reasons why the web might work better with inverted text:

  1. Unlike paper, a monitor is a light-emitting device that irradiates light energy directly (rather than indirectly) to the reader's eyes. 
  2. Every photon transmitted through a monitor reduces the life of the monitor.  Using darker color schemes will prolong the lifespan of the equipment.
  3. Initial market research into legibility and color-inversion for digital media has unclear results.  Many say that pure white screens are harder on their eyes than pure black screens.

Even So...

Despite the above, I personally advise against using an inverted color scheme for primary content elements of a website. For whatever reason, the vast majority of web users I've worked with have shown an aversion to inverted schemes.

The highest readership seems to be attained by medium-to-dark gray text on a white background or dark-gray-to-black text on a light , neutral-colored background.

If you want to use inverted elements, try to limit yourself to focus areas, headers, or block content. Try to hold yourself back from making entire sections of your website inverted.

Good luck!