The World of Color. Text and Background
| Text and Background |
 ne very important area to apply color principles
in web design is selection of colors for the background, text, and
links on the page via the attributes of BODY tag. This
is an interesting exercise in harmonizing three (or four, if we
count the color of visited links) colors playing quite dissimilar
roles and differing by the areas and shapes they occupy. (See
another article for
information on image backgrounds.)
The technical side of the problem is widely popularized on the Web. In fact, the whole Yahoo page on color in web design is made up of links to various color selection devices, decimal-to-hex converters, and tutorials on the non-dithering Netscape palette. Here, however, I'd like to explore creative opportunities of the genre rather than the technical details. Long ago were the times when all pages on the Web relied on the default gray background color (#C0C0C0) of Mosaic and Netscape Navigator. Now the prevalent color combination uses white background and default browser colors for text (black) and links (in Netscape, blue #0000FF). There's nothing wrong with this color scheme. Bear in mind, however, that an original and balanced color combination can improve the impact of your page incredibly---as well as, admittedly, a poor color choice is likely to alienate many of your visitors. The primary requirement that must be satisfied in any case is that the text must remain legible, which is ensured by a high enough level of contrast between the text and background. Investigations show (not surprisingly) that black text on white background is the most legible. But of course, there's a continuum of other color pairs which are contrasting enough to not sacrifice legibility. |
| Unusual color combinations with darker text on a light background are not very popular on the Web. Probably the reason is that it is difficult to create a color which is interesting and sufficiently bright at the same time. Take for an example the page of Andrew Glassner. Nice design, but the aqueous background color makes me wonder why it's this unconvincing intermediate tint and not just blue or white. The color feels like a watered down cola, with no reason to drink it instead of pure cola or pure water. |
| When I first hit the idea I started to think what might improve the dark-text-on-light-background scheme. First, background color can be made less saturated. This makes it more difficult to guess what pure color it alludes to, resulting in a more natural and engaging tint. Second, if the background color is pale, we could help make it more expressive by providing a text color along the same lines---best of all, a darker shade with the same hue/saturation values. |
| I might just as well say that text color needs support from the background, as a dark-colored text is very likely to be taken simply for black. If, however, background and text colors back up each other, their true nature is communicated in a much more eloquent fashion. With this scheme, link colors can be used to somehow zest the otherwise monotonous color landscape. For an example, I could show you a page at my home site. |
|
| Traditionally, links are marked with a noticeably brighter color than the body text, although I'd recommend link colors identical to text or background color in at least one dimension (hue, or brightness, or saturation). Visited links should somehow signal the fact that they're "exhausted" by being darker or less saturated than non-visited links. |
| An excellent example of balanced color design is the Kasparov vs. Deep Blue site by IBM. Its beautiful, mildly saturated background color (#CCCC99) is perfectly matched by the softened text color which may seem black but is actually a dark gray (#333333). Links use contrasting, but similarly softened blue (#0033FF). Text headings are painted by a darker shade of the background color (#666633), and navigation panels also use different variations of the same hue. Finally, photos imitate "duotone" grayscale with dominant colors contrasting to the background (purple, blue, green). |
| Light text against darker background looks more promising than vice versa, probably because of the self-luminous nature of computer screen. With this scheme, you have more opportunities to creatively vary background and foreground colors without sacrificing legibility. Any bright color used for text remains clearly discernible; any dark---or even not very dark---color used for background does not damage legibility. |
| As we've seen above, light backgrounds look better when low-saturated; conversely, dark backgrounds favor high levels of saturation. For an example, visit The Blue Dot site designed in a gamma of blue tones, or Studio Verso home page with soft warm text (#CCCCAA) over a velvet blue background (#000033). You may also successfully imitate golden or silver letters against a black background. |
|
| As a conclusion, we need to discuss one technical problem. Do the
colors for background and text have to belong to the browser-safe
palette? On one hand, it's not necessary because neither your
background nor your text will get dithered (as opposed to images).
On a 256 color screen, browser will simply replace your specified
color by some other, close enough color (as studies suggest,
these substituted colors do not themselves belong to the safe
palette).
On the other hand, however, it is still preferable to stick with the safe palette if possible. This will maximize the number of colors available for your images and minimize the risk of distorting your page's color design. Another important accessibility requirement is to always set all four BODY colors (background, text, links, and visited links), because any partial specification may result in a poor contrast between the colors you specify and the default colors (which can be arbitrary, specified by the user). |
Revised: Apr. 25, 1997
URL: https://www.webreference.com/dlab/9704/backgr.html
Find a programming school near you