Accessibility for Web Developers

Guideline 2

Guideline 2: Don't rely on colour alone

Colour is an integral part of design, and using colours carefully can make the difference between a professional looking site, and an amateur looking site. It's sometimes unfairly claimed that accessible sites are dull. If you want to see examples of accessibility sites that are well designed, visit Accessify, and AnitraPavka.com. They're both extremely well designed, with accessibility in mind. Professional sites use colour sparingly. You don't need to grab the visitor's attention, as you already have it. They've visited your site, and usually just want the information in a clear and concise manner.

This guideline has 2 checkpoints, ranging in importance from Level "A" (essential for the site to be accessible), to Level "AAA" (beneficial to ensure the accessibility of your site).

Important - Priority 1 Checkpoint 2.1 Ensure that all information conveyed with colour is also available without colour

This checkpoint is a priority 1 checkpoint. It must be satisfied for your site to be considered accessible. Visitors who cannot differentiate between certain colours, or using a non-colour display will not receive information that is conveyed using colour only. For example, if you provide links that rely on colour only, colour-blind visitors, and visitors using non-colour displays, such as a PDA, won't see them. To overcome this, important information that relies on colour should contain some other form of context or markup to ensure it's conveyed to all visitors. In the case of links, you could use text-decoration, or maybe change the font weight to make links obvious.

a
{
    font-weight: bold;
    text-decoration: underline;
    color: #00c;
    background: transparent;
}

This checkpoint is by no means saying, "Don't use colour". Colour is useful, but you should ensure the information doesn't depend on colour. If your site lists vacations, and vacations in "red" are half price, your visitors may see red for completely different reasons than your design intended.

2.2 Ensure that foreground and background colour combinations provide sufficient contrast

This checkpoint is a priority 2 checkpoint for images, and a priority 3 checkpoint for text. The contrast between the foreground and background colour should be sufficient that visitors can read the text without straining. As you would expect, light colours on a light background, and dark colours on a dark background are not good choices. Colour-blindness is another consideration. There are many forms of colour-blindness; Protanopia (red/green colour blindness - no red cones), Deuteranopia (red/green colour blindness - no green cones), and Protanopia (blue/yellow colour blindness - no blue cones), including many grey areas in-between. It is advisable to try and avoid these combinations, as information could be lost to some of your visitors. To get an idea of how your pages look to a colour-blind visitor, you can view your pages through a range of Colour Filters.

A popular technique to ensure that colour is conveyed properly is to allow visitors to change the colours to suit their preference. This technique involves specifying your colours through several external style sheets. The style sheets are applied to the document in the <head> section of your code, using the <link> element.

The main style is given a "rel" attribute of "stylesheet", and the alternative style sheets are given a "rel" attribute of "alternate stylesheet". If the visitor's browser supports switching style sheets, they can select a style sheet to control their experience of your site. The visitor will see the name you provide through the "title" attribute. Most standard compliant browsers support this technique.

The following is an example of specifying a style sheet, with two alternatives.

<link href="main.css" rel="stylesheet" type="text/css" title="Standard" />
<link href="plain.css" rel="alternate stylesheet" type="text/css" title="Plain" />
<link href="yellow.css" rel="alternate stylesheet" type="text/css" title="YellowValue" />

For browsers that don't support style sheet switching, you can use JavaScript to switch the colours, providing the visitor has enabled JavaScript. A List Apart has a great tutorial for this technique.

Further Reading

You might also like...

Comments

About the author

Gez Lemon United Kingdom

I'm available for contract work. Please visit Juicify for details.

Interested in writing for us? Find out more.

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“PHP is a minor evil perpetrated and created by incompetent amateurs, whereas Perl is a great and insidious evil perpetrated by skilled but perverted professionals.” - Jon Ribbens