The Light-Dark Contrast

The light-dark contrast describes the brightness of a color; it is also called tonal value. The following illustrations demonstrate the brightness of the colors on the color wheel. The tone of the circles informs you about the degree of the tonal value; yellow is the lightest and violet is the darkest color:

 Light-dark contrast

Violet and yellow show the strongest light-dark contrast, red and turquoise the weakest.
The color wheel above only shows the pure basic colors. A basic color, however, can be mixed with black or white (not with gray; more to this on the next page). Black diminishes the brightness of a color, white enhances it. So, red and turquoise, which do not show any light-dark contrast at all in their pure form, can be made a light red and a dark turquoise. Light red and dark turquoise then do represent a light-dark contrast.
And if white is mixed into blue, so that we obtain light blue, and if black is mixed into yolk, so that we obtain dark brown, the latter is the darker color, although it belongs to the yellow color family and has, in its pure form, the higher tonal value.
So: It is not only the tonal value of a pure basic color that determines the light-dark contrast, but also its degree of mixture with black or white.
 
The best way to be able to judge the light-dark contrast of a web site is to convert it into a black-and-white image. With the button "print" in MS-windows®, a screenshot of the current screen display, and thus of the web site, can be copied into the clipboard. Or there are screenshot programs. Now, the color format of the web site's copy can be converted into different shades of gray with a graphic program.
Here are some examples:

 
Shades of gray reveal lack of light-dark contrast

 
Absolutely no light-dark contrast

 
Shades of gray show a strong light-dark contrast

A web site which is totally kept in pastel colors can also be very appealing. But even with pastel colors, you should not completely omit the light-dark contrast; otherwise, the web site might seem dull and lifeless.
 
Black, white and gray areas do not influence angular harmonies. They can very well be used as partner for a light-dark contrast. If a web site is totally kept in pastel colors, e.g. with the 2-color harmony of light pink and light green, then black could be applied to create the missing light-dark contrast.