WebAIR

Do any tables use colour coding to convey information? (TAB07)

Why is this important?

Some tables use colour coding to convey information. For example, a bus timetable may use different colours to indicate different bus routes. Whilst this may make the table 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 (such as a text description, or different patterns, or differences in font etc.).

Example

//An example of colour coding that is used in conjunction with a text label
<table>
<caption>
Table 1: An overview of ticket prices
</caption>
<tr>
<th scope="col">&nbsp;</th>
<th scope="col">Monday</th>
<th scope="col">Tuesday</th>
<th scope="col">Wednesday</th>
<th scope="col">Thursday</th>
<th scope="col">Friday</th>
<th scope="col">Saturday</th>
<th scope="col">Sunday</th>
</tr>
<tr>
<th scope="row" style="color: gold">Gold Tier</th>
<td>£30.00</td>
<td>£30.00</td>
<td>£30.00</td>
<td>£45.00</td>
<td>£60.00</td>
<td>£60.00</td>
<td>£45.00</td>
</tr>
<tr>
<th scope="row" style="color: silver">Silver Tier</th>
<td>£20.00</td>
<td>£20.00</td>
<td>£20.00</td>
<td>£30.00</td>
<td>£40.00</td>
<td>£40.00</td>
<td>£30.00</td>
</tr>
<tr>
<th scope="row" style"color: brown">Bronze Tier</th>
<td>£10.00</td>
<td>£10.00</td>
<td>£10.00</td>
<td>£15.00</td>
<td>£20.00</td>
<td>£20.00</td>
<td>£15.00</td>
</tr>
</table>

Further Information

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