Good Color Practice - Part 3 of Chapter 2 from Web Graphics for Non-Designers (6/7) | 2 | WebReference

Good Color Practice - Part 3 of Chapter 2 from Web Graphics for Non-Designers (6/7) | 2

To page 1To page 2To page 3To page 4To page 5current pageTo page 7
[previous] [next]

Web Graphics for Non-Designers, Chapter 2: Using Color

Stylesheet Comments

When your site moves further into production, comments in stylesheets are an excellent way of maintaining your custom palette. Awareness among your production team is also a good idea, guaranteeing that no one will ever source a color incorrectly, for example by second-generation color picking from a lossy JPEG screenshot. Any further colors required within the site should be sourced from, and added to, this record. An example follows:

/* 
Base color scheme for Client X:
Core blue: #xxxxxx
Table header: #xxxxxx
Table row: #xxxxxx
Table row alternate: #xxxxxx
Complementary orange link: #xxxxxx
Faded orange (visited link): #xxxxxx
Strong orange header: #xxxxxx
*/

This is also a useful reminder for times when you come to revisit a site you designed yourself some time ago.

Simplicity

Color simplicity is an often-overlooked facet of successful web design. Almost every web user will recall seeing a garish rainbow effect applied to text or a background. Doing something simply because you are able to is hardly justification for an action. A few might think it fancy, but the majority will recognize it for what it is: illegible grandstanding. Considered implementation will more likely be rewarded with success, whether that be in terms of a more appreciated design, or a better recognized brand.

Showing restraint with your color selection is a good start. The far-sighted developer will realize the value in strengthening recollection of two colors, as opposed to broadening it over four. Some of the most renowned and familiar sites rely on a compelling association with a single color.

Contrast

Black text on a white background, the default color scheme of the Web, is high contrast and very readable, ensuring less frustration for visitors with poor eyesight. Maintaining these typical settings across the Web, however, would lead to a particularly bland experience. Additionally, such strong contrast can affect people with overly light-sensitive eyes. A dark text color with an off-white background color can often be more appropriate.

Adequate contrast between your visual elements (text, buttons, images) and their background environments can be achieved with a color scheme that meets the visual goals of your site, whether that is to be exciting and bold, muted and serious, or modern and unique.

Below are a number of examples of text and background color combinations showing poor contrast (left), and sufficient contrast (right). Remember that reading on the Web can be difficult even with a sensibly contrasting set of colors, so please avoid making it any more difficult.

Contrast Examples


To page 1To page 2To page 3To page 4To page 5current pageTo page 7
[previous] [next]

Created: December 16, 2002
Revised: December 16, 2002

URL: http://webreference.com/authoring/languages/html/definitive/3/6.html