I’ve a novice – at best – when it comes to HTML, but I’ve been a graphic designer for many years. Fortunately, what makes the printed page look good rolls-over to what makes a web page look good. I’m commenting on the use of background tiles in general, not your opinion on these specific patterns or the web site Patterns4U.

The background examples you show in Patterns4U are poor choices for two reasons: the value runs the entire grayscale gamut and they are visually busy. Let me explain.

All color has its equivalent on a gray scale and it can be given a number from 1, being white, to 100, which is black. This is called value. If you were to remove the color from these backgrounds you’d see that most of them have areas of absolute white and absolute black, as well as many areas in-between. Some call this contrast. The lesser the difference in value within a background, the better the choice. The greater the value, or contrast, between that background and foreground, the easier it is to read text or see foreground objects on that page. It is impossible to choose a color that will give sufficient contrast when a background runs the gamut for value.

The other problem is pattern. When a background has a visually busy pattern, it competes with the text of the page, and it’s the background that almost always wins. Text forms its own pattern so when you place it over a patterned background you are placing pattern over pattern. A heavier or higher contrast pattern will almost always grab the reader’s attention first.

For example: the grass.jpg pattern has areas of white, black AND everything in the middle. You might choose yellow for the text because it is different from the green color of the grass. This is true as far as hue, but you have to consider the value of yellow and yellow often “reads” nearly black. Technically, because of the value you could see the text over the lighter areas of the background, but the “hue” or color of yellow is difficult to see over white. The value of yellow, being dark, makes it difficult to read over the dark areas of the background. The blades of grass are thin and this presents its own problem in that they are similar in size to the lines that make up a letter. It’s like trying to find a needle in a haystack, so-to-speak. The needle would be easier to find if it weren’t the same shape as the hay and similar in color.

The bigger patterns found in funkyflowers.jpg and graygreenflowers.jpg grab your attention first because they are bigger and bolder patterns than the text. You want your reader to see the text — and hopefully read it! — not the background. If you think about it, you rarely find printed pages with these types of backgrounds, so why do we use them on the web? When you see text on a TV screen it is almost always white with a very dark shadow, placed over a darkened area of the screen or placed within a block of solid color. HTML is limiting in that it can only place text over a solid color.

You can use these background, but you should do two things: first, change the value. You can do this by opening them in a photo-editing or drawing software and making them either very, very light or very, very dark. You can then choose a color of opposite value for the text. Second, colorize them, that is make it monochromatic or one color. Then choose a different color for the text or foreground objects.

If you’re not sure if your background in inappropriate, print out your page in black and white. This simple step will tell a lot. All this can be avoided if you choose subtle backgrounds and let your foreground graphics and text be the “stars” of your page.

And, me, too. Thank you for the “how-to” on favicons!