The Web, what's in a colour? Article By Adrian Rayfield

Added: 02.07.2008

Colour and it's importance on the Web

The Web is a colourful medium and colour plays an important role in all Web sites. Colour can draw your attention to certain areas of a page, clearly showing navigation and links, as well as make the site look more inviting.

If the colours you choose are wrong or detract from the site or it’s content it can have a detrimental effect and actually make the site very hard to use, especially for those people with certain disabilities, such as colour blindness or poor visibility or users who simply prefer to use a black and white screen set up.

To meet accessibility standards you should refer to the W3C WCAG 1.0 guideline 2 which says:

Checkpoints:

• 2.1 Ensure that all information conveyed with color is also available without color, for example from context or markup. [Priority 1]
• 2.2 Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen. [Priority 2 for images, Priority 3 for text].

When deciding on the colour scheme for your Web site ensure you select colours that have a good contrast between background and foreground, this is not only true with text but with graphics also.

An example of a good contrast for text is a follows as used on this sites background and H1 headings:
Foreground: #000080
Background: #F9F9FF
Passed at Level 3 (The contrast ratio is: 15.23)
colour difference:625/brightness difference:235

There are many tools online or that come with toolbars that can test colour contrast for you.

Web colours come in several formats, the most common are RGB (Red, Green, Blue), Hexadecimal known as Hex (#ffffff is white) and named colours such as red, blue etc. The most common and widely used is the Hex.

All of the above examples are connected, for example white could be defined in any of the three ways:
RGB = 255, 255, 255
Hex = #ffffff
Name = white

Colour and your Web site

To draw people into you site you can do several key things, ensure the navigation is clear and consistent, colour plays a big part in this as it can stand out from the rest of the content making it easy to see, if the contrast is good people can use it easily and continue into your site.

Headings and sub-headings can also be made to stand out more with colour separating the page into sections and allowing people to skim read the headings to gain an overview of the page.

Another important consideration is contextual links written within the content, if there isn’t an obvious colour difference between the link and the surrounding content people will not be able to distinguish between them and never find or use them. You can also change the colour of the background when the links are rolled over thus making them easier to see and giving a more or a visual cue.

Graphics can do the same as text or more so when it comes to drawing attention to an area of a page (and I don’t mean flash, animated images etc) or adding interest to a site. Relevant graphics along side text helps ‘lift’ the page and can also give good visual clues as to what the site is about or does, say in a banner image, or to highlight an area of the page, say a newspaper image near the latest news feature. Of course, don’t forget to use alt attribute with all your images and make sure they are a true representation of the image.

So to conclude, colour in text and graphics can be used to make sites look more aesthetically pleasing as well as giving clues where key parts are of your site, such as the navigation, headings and links. If colour is used well it will encourage your users to stay, use colour badly and it will encourage your users to leave, for good.

Some useful links:

• RNIB Colour contrast Web access centre
• Wikipedia article on Web Colours
• Juicy Studio's colour contrast analyser
• W3 Schools color tutorials
• VisiBone Online Color Lab for the Webmaster's Palette
• W3C WCAG 1.0 Guideline 2 - Checkpoint 2.1 & 2.2 - Priority 1, 2 and 3

Article written and copyright held by Adrian Rayfield of Rayfields Accessibility © 2008.

Top

Did you find this article / tutorial useful, please give us your comments.

For more information on Rayfields Accessibility Consultancy and Web Development Services please contact us by telephone on 0845 0037 508 or email : accessibility@rayfields.co.uk.