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).
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