Using Contrast in Web Design

Contrast attracts your eye

Contrast makes things stand out from their surroundings, be more noticeable. Things with higher contrast will be more noticeable.

Contrast is the most common problem area I find when analysing designs, usually because there just isn't enough contrast, or the highest-contrasting elements aren't the right ones.

How to use Contrast

Designers use contrast to help users to browse effectively by guiding the eye swiftly and effortlessly around the page. A web page that has been well crafted feels refreshingly easy to look at, because it helps to minimise the difficulty of interacting with a screen (see above). All screen features compete for the eye's attention. High contrast is employed to promote more important features. Low contrast helps to make less important features recede a little from view.

Example of insufficient contrast

One to try

Visit Alex King's site, and try switching the styles using the icons at the top-right. Which is easiest to read?

Contrast devices

Areas of high contrast attract the eye more than elements of low contrast.

• However, you can only use this if there are areas of low contrast to stand out from. If everything on a page is high in contrast, everything will be fighting harder for attention, and the result is a page that is actually tiring to look at.

Sharp changes in tone attract.

• The greater the difference in tone, and the sharper the boundary, the higher the contrast
• Thick lines attract more than thin lines -but - lines that are too thick (fatter than the spaces between them) lose clarity. As a mass, black (the design term for super-bold) text has more contrast on the page, but the individual characters have less contrast in relation to the space that each word occupies, and so lose clarity

Areas of tone/colour that are different (from the page background or colour scheme) stand out

This is obvious. If you put an orange logo on a predominantly blue page, it will stand out because the colour contrasts. A single white box on a dark page will stand out because there's a lot of tonal contrast.

New things with high contrast stand out more than familiar things.

When the user has already seen even one page and identified that dark bar at the top as "navigation", and that strip below it as "a banner ad" they'll automatically start to ignore it.

Therefore, when there's something important for the user to see, it's easier to show if it's placed in a part of the page that changes, i.e. content canvas. Otherwise, it would have to work a lot harder to be seen.

Movement attracts.

Things that move are obviously very effective at attracting the eye. In real life, we need to be more interested in moving things, because they're more likely to be food or a threat. Our brains are tuned to respond more to movement out of the corner of the eye than to things in centre-vision that move.

Movement doesn't just mean animation. To a lesser degree, the visual suggestion of movement also attracts. Diagonal lines attract more than square lines. Busy patterns attract more than flat tones.

Example: Amok

The Squint Test

The squint test is an easy way of assessing the overall contrast of a page.

All you need to do is close your eyelids so your eyes are about three quarters closed, so that normal text becomes blurred and unreadable. All you'll be able to make out is areas of lights and darks, and strong colours. This will reveal the areas of highest contrast.

Check where your eyes tend to focus. What are they drawn to on the page? This will give you a good impression of the most 'attractive' elements. Are they the right ones to help your visitors use the site successfully?

Try the squint test on the Amok screengrab above. You'll see that the two left-hand blocks are most attractive, then the image on the right, and maybe then the background image at the top right of the page.

Try it on something that uses simple, clear colour and contrast, like this iPod advert.

Measuring contrast

To check contrast, you need to compare the brilliance/luminosity of the foreground and the background. The greater the difference, the greater the contrast.

For the following examples, I took screengrabs, reduced them to greyscale in Photoshop, and took luminosity readings with the colour picker. Try the squint test on these:

Example A: Web Design from Scratch

WDFS uses black/white for the majority of body text, for maximum readability. Certain blocks of text (introductory paragraphs, comments and callouts) are displayed on variations of light grey, but still offer around 90% contrast.

Example B: sealedmedia.com

The main navigation uses white or mustard yellow, on a mid-to-dark grey background. The white contrasts only 32% against the grey, which is probably insufficient for people with visual impairments.

Yellow/grey has very little tonal contrast - only 7%. This design relies on the yellow's contrasting hue; which is not a safe option for certain colour combinations.

The yellow colour is used for the current section, which is a mistake. The current link should be permanently highlighted, either with extra light, extra coloured light, or extra contrast. While the yellow is adding colour, it is not coloured light, and reduces contrast far too much.

Example C: transformationalbreath.co.uk

This site puts black text over a grey & white background image.

The minimum contrast is 91%, which is sufficient for the text to be universally readable.

Example D: usernomics.com

The default state has yellow over a mid grey, which gives a tonal contrast of only 20/100.

The startling mouseover style (dark grey/yellow) has more contrast, but only 40/100.