White Text, Black Backgrounds

It makes your visitors and me sick to our stomachs, and I don’t mean that in the figurative sense of design snobbery. I mean it literally makes us nauseous.

When and why not to use white on black in webdesign

While there are all kinds of studies about marketing, readability, etc. as to how and why various color combinations and contrasts work this is simply my opinion. Although I think the image above fully illustrates my point.

Paragraph Text

Your website visitor applies two basic techniques when it comes to taking in content from your website: scanning the page to take in the overall content or deeply reading the content. We scan headings, icons, menus, and various graphics, but we read paragraphs. I highly suggest that you do not use white text on black backgrounds for paragraph or large portions of text for the following reasons:

• Large blocks of white text interrupts the scanning process and draws the eyes to focus on the larger copy. While that doesn’t sound like a bad thing, it is.
• Reading large portions of high contrast text causes eye strain
• This eye strain creates a “burn-in” effect that creates temporary visual artifacts when looking away from the copy

From a readability standpoint, there must be certain level of contrast, but always remember that we can swing too far if we aren’t careful. Consider the following examples. Really focus in and “read” each box.

Which ones did you prefer. My guess is that across the board most of you preferred the two boxes on the right. There was plenty of contrast, but it wasn’t so high that it made looking at the text an un-enjoyable and, in most cases, an unbearable experience.

That’s really all I’m asking for.

Heading Text, Icons, and other elements

Here is a perfect time to use the high-contrast power of white text on a black background. These are the elements your visitors are scanning for, and it makes sense for them to standout in such a way that attracts the eyes. Because they aren’t deeply reading these elements, you don’t have the problem of affecting your visitors in a physically undesirable way.

Consider the following examples.

While in the left box the heading is a different color, your eyes are drawn to the text and the heading is an after thought. On the right, even though the heading is only white and doesn’t feel as set apart from the body copy, your attention is still directed to it. At the same time, the copy is still easy to read.

In Summary

Have fun and be creative, but please consider the affects your choices have on your visitors. Not only will your website be more enjoyable to read, but it will probably get read more often, since it will no longer require me to take Ibuprofen and some Pepto to get through an article.

What other poor design choices do you wish designers wouldn’t make?