Simply put, contrast is the difference between two colors. On a web page, the amount of contrast required varies with different parts of the page. You usually want a high contrast between text and its background color. But too high contrast between design elementsmight give an unsettled and messy impression. Black and white create the highest contrast possible.

Please visit our Color Contrast Analyzer page to see if the colors you want to use have enough contrast.

Colors can contrast in hue, value and saturation, but there are many different types of contrasts that have been defined by color theorists throughout the years. Some of them are perhaps not directly applicable to web design, but let's look at a few of the most important.

Contrast of hue is what relates most directly to the color wheel combinations described above. The further away from each other two colors are, the higher the contrast. This means that the complementary color combination has the highest contrast, while the analogous combination has the lowest. For text, a contrast of hue alone is usually not enough to make the text as legible as wanted. In that case, you might want to combine contrast of hue with some other form of contrast.

A special case of contrast of hue is contrast of warm and cold colors. The way the human eye works, cold colors appear to be more distant, while warmer colors appear to be closer. This means that it is a good idea to use a warm color for a symbol or menu, and to use the cold colors for backgrounds.

Contrast of value is very efficient in creating large contrasts. The biggest contrast of them all-- black and white-- can be said to be a contrast of value. In general, large differences in lightness are considered to be pleasant for the eye, but low contrasts of value can also be useful for more subtle differences-- for instance, in a background.

Contrast of saturation is often best for design aspects that do not require a lot of emphasis. A set of colors with different saturations set against a grey background can be interpreted as transperancy. This is something that can be used to interesting effect.

This is a contrast effect that is created by our eyes' tendency to require a complementary color. You can get this effect by combining two bright colors that are not complementary, or by using a single bright color against a grey background. This gives a feeling of instability and tension and should be used with caution.