The Absolute Beginner's Guide to Black in Web Design

Never use black, except for your text. If you're a beginner to web design, this is the first rule you may want to keep in mind. Of course, you may not easily accept my word for it. You wouldn't be interested in website design if you're not curious as to why and how certain colors are used for a particular website. So let's take a close look at the use of black in web design.

Listen to the Art Masters

If you have read up a bit about art history, then you may have read about impressionists, at some point. These people were the true masters of color, and they experimented on what the effects would be when colors are placed next to each other. They even came up with styles of painting which focused on dots, much like when modern digital photos have pixels. Their discoveries were quite startling, as they found that black simply was ineffective for their paintings. It didn't convey depth well, and it wasn't quite rich in demonstrating the dramatic effects of changing hues. The color black simply looked unnatural, as it does in nature.

Are You Sure You're Seeing Black?

"Wait a minute," you say. "I've seen lots of black in websites!" I'm not saying you're lying - I'm just saying that perhaps you're mistaken. That's because the use of true black is actually quite rare in design. Maybe you think it's black because it's dark. But when you really look closely, it may not be black at all. It may be a very dark shade of gray, or perhaps the deepest and darkest midnight blue.

Black Is Overpowering

So why is black rare in web design? That's simple: it can really be overpowering. It's quite an obnoxious color because it really stands out (and not in a good way). It really feels heavy, and you have to make sure to balance it out with lots of lighter colors. And that doesn't' really work often. For example, it's been proven that dark background doesn't work as well when you use it as background for text. Since black is the darkest color of them all, it's the worst of the lot. Most people actually prefer lighter backgrounds when they're reading. Every color of text you use on a black background is simply harder to read, and that even includes white text. You have to add a lot more spacing, and you need to increase the kerning. A larger font is also advisable.

Books on color in web design:
• Color Theory and Modeling for Computer Graphics, Visualization, and Multimedia Applications
• Color for Web Design
• The Principles of Beautiful Web Design
• Color Harmony for the Web
• Psychology of Web Design

Black Can Be Unsettling

When you use black as a background for another color, it doesn't work well either. That's because black is unrelated to all other colors. While the color in foreground may stand out more, it feels dissonant and separated. There's no sense of unity or relationship. Of course, you may think that black is the only choice for your predominant color when your website wants to project an image of Goth rebelliousness or something similar. In that case, you can try to use the darkest reds or blues instead. These colors are not so off-putting. In other words, if you want your website visitor to actually want to stay longer on your website, you don't use black. Black subliminally encourages them to go away.

Black for Text

So when can you use black? Simple: use it for your text. The separation from the background color is a good thing when it comes to readability. You need the text to stand out, and when you have a lighter background then black is the color that stands out the most. Yet even then, there will be some experts in the field who will say that black text is not the best. It's too demanding, and it can strain the eyes too much. Like dark backgrounds, what we see as black text isn't really black at all. It may actually be a darker shade of gray, which helps relieve the strain the pure black can cause. So to recap, here are the rules:

• 1. Don't use black.
• 2. Specifically, don't use it for your background. The other colors on a black background can have edges that will seem to vibrate, and this can be an unpleasant feeling for your viewer.
• 3. If you think you have to use black, consider a very dark color instead such as midnight blue. Maybe that will work better. If you are working on a "black and white" image, maybe you can use a very dark shade of gray instead.

Perhaps in the future when you've already learned a lot about web design, you can find a way to use black effectively. Since this is a guide for beginners, you may want to stay away from it for now.

And since our designers are not beginners at all, here are few examples of how a perfectly black website template looks like.