Colour Contrast

Contrast
Now that we know how different colours can be combined, we need to talk about adding contrast to your colours. Contrast in colour theory works much the same way as you've learned about layout; with colour theory you are also concerned with Readability and Legibility.

Legibility is how easy it is to identify text in short phrases such as headlines, signs, slogans, etc.

Readability is how easy it is to read lots of text: sentences, paragraphs, and pages of text.

Along with typeface and size, colour contrast is the most important way to make sure your project is both readable and legible.

With regards to colour theory, contrast is the difference between two colours. On the screen the amount of contrast required varies with different parts of the page. You usually want a high contrast between a text and its background colour. But too high contrasts in the background itself might give an unsettled and messy impression. Black and white is the highest contrast possible. In print, black on white is the easiest to read; from far away, black on yellow (such as caution signs ) is most legible.

Colours can contrast in hue, value and saturation, but there are many different sort of contrasts defined by colour theorists throughout the years.

Lightness contrasts create a very distinct image. In hue contrasts, vivid tones have the most contrast, and any opposite colours along the hue circle are compatible. Contrasts in saturation are often used in a one-point colour scheme – use different saturations of the same colour to create a scheme that is easy to print. Saturation contrasts are more difficult than hue or value.

high contrast
 
low contrast

 

 

 

warm/cold contrast
Contrast of hue
Contrast of hue is what relates most directly to the colour wheel combinations. The further away from each other two colours are, the higher the contrast. This means that the complementary colour combination is 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. You probably want to combine that with some other form of contrast as well.

A special case of contrast of hue is contrast of warm and cold colours. The way the human eye works, cold colours appears to be more distant while warmer colours appears to be closer. This means that it is a good idea to use a warm colour for a symbol or menu, and to use the cold colours for the background.
 
high contrast
 
low contrast
Contrast of value
Contrast of value is very efficient in creating big contrasts. The biggest contrast of them all; black and white, can really 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 be useful for more subtle differences.
 
high contrast
 
low contrast
Contrast of saturation
Contrast of saturation is often best for design aspects that do not require a lot of emphasis. A set of colours with different saturation against a grey background can be interpreted as transparancy. This is something that can be used for interesting effects.
 
high contrast

Simultaneous contrast
This is a contrast effect that is created by our eyes' tendency to require a complementary colour. You can get this effect by combining two bright colours that are not complementary, or to use a single bright colour against a grey background. This gives a feeling of instability and tension, and should be used with caution. These contrasts cause movement in the eye, and should never be used with text that must be read.

 

not good
better
good for background
bad for text

 



against natural values

with natural values

 

combination of contrasts
While the contrasts above can be efficient used one at the time, the most common is 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 colour orange. This is a combination that has a high contrast of hue which 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, more readable, and still a split complementary combination.


Working against the natural values of the colours can often have bad effects. For instance, yellow is naturally a lighter colour than its complement blue. A combination where you have a yellow that is darker than the blue would feel strange.

 

Green on red can be very hard to read.
As can red on blue.
 
Black on white is easy to read
And so is yellow on blue
White on black is more difficult

Colours and text
As mentioned above, using the right contrast is especially important for text. Using the wrong colours can decrease the readability drastically, and it will quickly tire the eyes of the reader. Highest readability is black text on white background. Black and yellow is another combination which usually has a high readability, as does blue and white.

Green text on red, and red text on green are for many particularly hard to read. A combination of red and blue creates a vibrating effect that can make reading very difficult.

White on black produces high contrast, but it is more difficult to read because black is perceived as being heavier than white and, thus, squeezes it out a little.

The same sort of effect happens with warm and cool colors. The warm colors are perceived as advancing out of the screen slightly, and the cool colors recede. This means that a warm/dark color is best for text, while a cool/light color works best for the background.

In any case, a white, black, or a very light desaturated background always looks the most professional (in that order).

 

One last thing...
Another thing that can be good to keep in mind when making colour selections is colour blindness. Some 8% of the population has some form of colour blindness, and by choosing the wrong colours you can make your page virtually unreadable for them. There are some colours 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 colour is not the only visual cue.