spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / authoring / graphics / color / nondesigners / chap2 / 3 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

Developer News
News Flash: Adobe Has iPhone Workaround
Adobe's Flash 10.1 Goes Mobile (Minus iPhone)
A Salute to Visionary CEOs

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


home / authoring / graphics / color / nondesigners / chap2 / 3 To page 1To page 2To page 3To page 4To page 5current pageTo page 7
[previous] [next]

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Building a Banking Application Home Page with OOP · Mixing Scripting Languages · Review: phpFox, a Social Networking CMS with all the Bells and Whistles
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Enterprise 2.0: Social Networking in the Cloud · BroadSoft Marketplace Hastens Pace of Telephony Innovation · Review: HTC Hero for Sprint

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

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