There are two main issues to consider when selecting colors: the choice of text on background color for legibility, and the mixing of these colors to create a cohesive look.

First, a little background on color systems.

On a computer monitor, colors are built up by combining red, green and blue lights with varying intensities. On a printed page, the colors are formed by ink pigments. Our eyes see the result of light reflection and absorption of the pigments, not the actual lights. The former is called the additive color system and the latter the subtractive color system.

Why is this important? Take the most common case of black text on white background. On a printed page, the light reflecting from the white page has been softened by the texture of the page, while the black text creates a vivid contrast with the white achieving great clarity. Conversely, on a computer monitor, the white is formed by combining the maximum intensity of all 3 colors, similar to the effect of shining a light in someone's eyes, thus making the white background too harsh for the readers. Another thing to note is that bright text on a dark background creates a halo effect around each letter, causing the readers to have to strain their eyes.

With that in mind, research has shown that black on a light neutral background is more readable than black on white. Usually, a light grey background is preferred because it is neutral so as not to influence the colors in photographs. There are also some 'colored greys' like the cross point between blue and green, as well as red and yellow.

So what about matching colors?

A color wheel is a useful tool for artist to choose colors. It is made out of three primary colors: red, blue and yellow, plus a blend of in-betweens.

We select colors based on the mood we wish to convey:

• Red: strong, aggressive, hot, angry, stimulating.
• Blue: cold, clammy, depressing.
• Yellow: light hearted, friendly, vivid.
• Orange: warm, comforting, welcoming, energetic.
• Green: cool, soothing, refreshing. Dark green also signifies wealth and masculinity.
• Purple: luxurious, royal, sophisticated.
• Bright: light, airy, liquid, relaxing.
• Dark: dramatic, confined space, serious, rich.

Then we find matching colors using various color schemes:

• Complementary: use direct opposites on the color wheel, e.g. red & green.
• Clash: use the color to the left or right of the complement, e.g. red & blue
• Analogous: use 3 consecutive colors, e.g. red, red-orange & orange.
• Monochromatic: use only different shades of the same color, just by varying its brightness, e.g. bright red, dark red.
• Triads: use 3 equally spaced colors, e.g. red, blue & yellow, or green, purple & orange.

Limit your main colors to 2 or 3 so as not to look like a patched-job, and stay consistent throughout the site.

Here's a color matching utility to help you visualize how colors work together on a webpage. What are all those #numbers?

• To most graphics and web-authoring applications, #RRGGBB is the hexadecimal representation of a color, with 2 characters each for Red, Green and Blue. For instance, #008800 signifies a medium green. The lower the number, the dark the color. Hexadecimal runs from 0 to 9, followed by A through F for a total of 16 values.

You may also find this Color Scheme Tool very useful, especially the choice of Analogic, Complementary, etc, schemes on the right hand side.

Whichever color you choose, be consistent throughout the course so that your readers can learn to associate colors with their purposes. An inconsistent design confuses the readers and is looked upon as unprofessional. If you have a series of courses, keeping them to the same basic theme will convey the tone and feel for the overall series you wish to carry forward.

Approximately 1 in 12 men and 1 in 200 women are affected by the effects of color blindness. The most common is red-green deficiency, where people have difficulty distinguishing any color that is dependent upon the red:green ratio. You can also generally assume that they will see less contrast between colors. If your page contents are dependent on colors, run it through a color filter.

To learn more, Dr. Carrie Heeter has created an exploration module color scheme which describes and shows many different kinds of color schemes you might use in your online course. In general color schemes with fewer colors and color schemes with more subdued colors are more elegant. Use uniform chroma or analogous color schemes for elegance.

< PREV [Emphasis]	NEXT > [Links]