DEMOS Project - Accessibility Guide: Graphics and Colour

Graphics and Colour

Imagine the following scenarios:

a site is accessed via a text-only browsers.
a site is viewed on a monochrome display.
a user is blind or visually impaired.
a user is colour blind.
graphics are turned off to facilitate faster loading.

Using graphics

It is best to avoid using images to convey information. For example, designers should ask themselves whether it is really necessary to use graphical buttons as navigation links, especially when the graphic is simply used to display text in a particular font.

If graphics are used, the information conveyed should be made accessible by other means, i.e. by including alternative descriptions.

Using the ALT attribute in image tags

Images can be enhanced for visually impaired users by adding the ALT attribute with a description.

<img src="image.jpg" alt="Photo of the author at age 25.">

Sometimes it is sufficient to describe the function of a graphic rather than its visual appearance, for example in the case where the image is a link.

<a href="contact.html"><img src="mailbox.gif" alt="Contact Details"></a>

All images should contain the ALT attribute. If an image is purely decorative, does not convey information or is used as an invisible spacer, leave the ALT attribute empty.

<img src="image.gif" alt="">

For more detail see this excellent article:
Use of ALT texts in IMGs

Long description

Where ALT text is insufficient and a longer descriptions of a graphic is needed, the LONGDESC attribute can be used to point to a document which provides more information or a detailed description.

<img src="diagram.gif" alt="Diagram of Circuit" longdesc="circuit.html">

D-link

Because not all browsers support the LONGDESC feature, a so-called D-link (description link) can be added next to or below the image, which leads to another page with a detailed description. This is especially useful for server-side image maps.

<a href="image1.html" title="Description of Image Number 1">[D]</a>

Image maps

Image maps are mostly larger images that include 'hotspots' (clickable areas), e.g. a map of Europe, where clicking on a country will take the user to the corresponding page. There are two types of image maps: client-side and server-side maps.

Client-side image maps should be used when designing accessible sites because information about the destination of these clickable areas (the URL, i.e. the address of a page) is send to the browser. In addition, the ALT attribute can be added to each hotspot. It is also recommended to include additional ('redundant') text links on the same page. This last point is especially important where server-side maps are used.

Server-side image maps are not accessible to screen reader users because the URLs of clickable areas are not send to the browser. When server-side maps are used it is especially important to provide additional text links on the same page.

Image maps are often used for navigation menus. This should be avoided.

Graphics as navigation

Avoid using graphics as navigation links. If graphics are used, they should be labeled with the ALT attribute and additional text links should be included at the bottom of the page.

More on these topics can be found in the WAI Accessibility Guidelines: 7. Images and image maps.

Avoid flickering

Animated images can cause the screen to flicker. This can be annoying and distracting and can cause problems for people with photosensitive epilepsy.

Using colour

Colour is good

Colour is good - if used wisely and correctly. Users with learning difficulties, such as dyslexia, appreciate a touch of colour and the occasional graphic to break up the monotony of text. Small icons used consistently with main navigation links can increase the recognition factor.

This site provides a number useful tips:
Web Design for Dyslexic Users.

Provide contrast

Visually impaired people, those with a colour deficit and the growing number of silver surfers will appreciate contrasting colours for background, text and links. Contrast increases readability and make it easier to distinguish between link and visited link.

An excellent tool for colour checking is Vischeck , which simulates how a page looks to someone with a colour deficit.

Don't use colour to convey information

It is important that colour is not used to convey important information. "Click the green button to start" or "Required fields are in red." are obvious examples. A screen reader user will not be able to distinguish a green from a red button.

Navigation icons also should not rely on colour alone. They need to be distinguishable even on low colour settings or black and white displays.

Allow user control

By keeping presentational styles (in this case background, font and link colours) out of the HTML document and instead specifying them in external style sheets, a designer can allow users to set their own preferences in their browsers, to specify their preferred background colour, or colours for link and visited link, or even apply their own custom made style sheets.

In older browsers, text browsers or assistive user agents, where style sheets are ignored, pages are most likely displayed with a white or grey background and conventional link colours such as blue for link and purple for visited link.

Example: this page without style sheet. The colours default to your own browser settings.

See the chapter on user control for details on how to set font and colour preferences in various browsers.

It is also a good idea to test pages on a monochrome display.

Some tips

Keep backgrounds unintrusive.
Black on white is most legible.
Some people prefer off-white / light grey backgrounds because white can be too bright.
Visually impaired people tend to prefer yellow on black.
Red and green, blue and black, green and yellow are combinations that can cause problems for people with colourblindness.
Red or green on black is illegible.

More information

An extensive list of links to helpful pages can be found on the resource page.

| Previous || Table of Contents || Next |