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
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
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
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.
Simultaneous Contrast
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.
Combination of Contrasts
While the contrasts above can be efficiently used one at the time, is is most common to use a combination of them-- especially for text where you need a high contrast. The top picture to the left shows blue and its split complementary color, orange. This is a combination that has a high contrast of hue. This gives a rather vibrant combination that can be tiring to the eyes. By changing the value and saturation as in the next picture you will get a combination which is much more pleasing to the eye, and more readable.
Working against the natural values of the colors can often have bad effects. For instance, yellow is naturally a lighter color than its complement, blue. A combination in which yellow is darker than blue would feel strange.
Colors and Text
As mentioned above, using the right contrast is especially important for text. Using the wrong colors can decrease the readability drastically, and it will quickly tire the reader's eyes. Black text on a white background has the highest readability. Black and yellow is another combination which usually has a high readability, as do blue and white.
Green text on red and red text on green are particularly hard for many people to read. A combination of red and blue creates a vibrating effect that can also make reading very difficult.
Color Blindness
Another thing that can be good to keep in mind when making color selections is color blindness. Some 8% of the population has some form of color blindness, and by choosing the wrong colors, you can make your page virtually unreadable for them. There are some colors which are worse than others-- for instance, red and green. Blues and yellows are usually better to use for this reason, and you should make sure that there is a strong contrast between a text and its background. Also, make your design so that color is not the only visual cue.
