WebAIR

Do you use colour to convey variations in presentation of text (e.g. different coloured text to represent a heading)? (TXT10)

Why is this important?

Some webpages use colour coding of text to convey information. For example, CSS may be used to change the colour of a paragraph element to signify it is a heading. Whilst this may make the text easier to understand for some users, it can cause problems for people who are blind or colourblind, who may not be able to perceive the colour differences.

How to fix the problem

Whenever colour coding has been used to convey information, make sure there is another means of conveying the same same information. This can usually be achieved by using the appropriate semantic markup (such as using a heading element to markup heading text) but it can also be achieved by a text description, or different patterns, or differences in font etc.

Example

//An example of colour coding that is used without the appropriate semantic markup
<p style="color: green">This is the title of this section</p>
<p>This is the content of this section. It is made up of several sentences. Each of the sentences contains a number of words.</p>

//An example of colour coding that is used with the appropriate semantic markup
<h1>This is the title of this section</h1>
<p>This is the content of this section. It is made up of several sentences. Each of the sentences contains a number of words.</p>

Further Information

  1. http://www.un.org/webaccessibility/1_visual/12_notcolouralone.shtml