The Blog

NOTE: Clients ask us to design websites that will be easy to read and yet be an interesting design. Several times in the last few weeks, the topic of white text on a black background has come us. We always recommend that a body of text, other than headlines or a short body of copy, should always be black on a white or soft gray background. There is different schools of thought on this, but the  following criteria from one of a top flight internet and web agencies, Transio, have a better defined criteria. They are a website and custom software development company based in  Miami, Florida.

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?.

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, we advise against using an inverted color scheme for primary content elements of a website. For whatever reason, the vast majority of web users we’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. In using inverted elements, limit it to focus areas, headers, or block content. Do not make entire sections of a website inverted.