Skills for Access

Why this is important

There are many groups of people who may experience colour-related access barriers when trying to access multimedia content. People with a colour deficit (colour blindness) may be unable to distinguish between specific colour pairs, while people with no functional vision, and who are listening to content, will also be unable to detect information presented using colour alone. Colour combinations with insufficient contrast may result in material that is difficult to read for many people. The same problems may be experienced by anyone accessing the resource using a device that has limited (or no) capability to display colours.

Also be aware that certain text and background colour combinations can induce temporary conditions in people who otherwise have no significant visual impairment - for example, blue/red combinations can induce a temporary condition known as chromostereopsis. Even differences between colour displays of flat screen and cathode ray tube (CRT) monitors may cause confusion.

General Principles

There is a perception that web and multimedia accessibility means black and white text, and that colour is something to be avoided, but this is not the case. The over-riding principle is not to rely on the requirement of colour perception to reveal information.

This means continuing to use colour conventions recognisable to your target audience wherever they may aid understanding, but to take steps to provide information in a way that it can still be accessed and understood without requiring colour perception. Techniques for allowing users to configure a display to suit their own readability needs are discussed in separate How Tos (listed under Related Resources on this page), but it's a good idea to avoid colour combinations that are likely to require a significant group of people to change their settings.

Before you continue

The advice on this page helps you avoid introducing a specific accessibility barrier, but it's not a magic formula. To avoid attempting to follow a technical solution that is not appropriate to the resource and its intended purpose, you need to know the context in which the multimedia resource is being used:

1. The purpose or aim of the multimedia resource in question, and whether it is being used to supplement another resource in the learning environment, or whether its use is required by students.
2. The target audience, their knowledge and expectations, and the type of browsing and assistive technology that they may be using.
3. Whether the information and experiences provided by the multimedia technology are already available in an equivalent, alternative form.

For more background on this approach, see our Guide to the use of multimedia in accessible e-learning.

Technique Details

For problematic text/background colour combinations, avoid as far as possible text/background colour pairs where colours are at opposite ends of the colour spectrum (i.e. combining red or orange with blue or purple). Avoid also combinations that may cause difficulties for specific conditions of colour deficit: red and green, red and black, and beige, yellow or orange with red or green.

When using colour to code information, tweaks to text should avoid any problems for people who cannot see the colour coding. For example, instead of referring to "in the following list, countries in blue are full members of the European Union", you could use a symbol or icon (with appropriate alternative text) adjacent to each item to supplement the information provided in colour.

Try to avoid using low contrast colour schemes - tools are now available (see External Links on this page) to test foreground and background coloyurs for potential low contrast problems.

Here's an example of a 'before' (Example 1) and 'after' (Example 2) situation, where a barrier relating to information being provided through colour alone has been removed:

Example 1: Page requiring colour perception to identify information

With the addition of symbols, the use of colour to distinguish information is supplemented by information that does not require colour perception (for an effective solution, the graphics providing the symbols should also have appropriate and consistent alternative text)

Example 2: Page using colour and symbols to identify information

Be aware, though, that the use of mathematical symbols (such as asterisks) can be ignored by screen readers at certain settings.

Testing

As with most accessibility issues, feedback from end users with colour deficit is particularly valuable. However, there are some useful tools available to carry out checks, such as the simulation tools available at vischeck.com, where uploaded web pages are redisplayed to simulate how they would be viewed with specific examples of colour deficit. Browser settings can be changed to ignore colours, while you can also simulate a loss of colour perception by listening to content through a text-to-speech device, or printing out screen shots using a monochrome printer, or setting a monitor's display to monochrome, or using a bookmarklet (see external links) to redisplay the screen in monochrome. Are features referred to by their colour? If so, does the information still make sense when experienced without colour?