Design and accessibility – use of colour

Apologies to all the GovHackers! I meant to post this yesterday, but was struck down with a migraine. I hope it’s not too late!

Colour contrast

The most important thing to remember when it comes to designing an accessible web site, app or interface is colour contrast. This is the kind of thing that needs to be picked up in the design, and there are a couple of ways to do it.

Colour contrast testing by HEX value

Juicy Studio has a fantastic colour contrast analyser – just plug in your foreground and background colour contrast values and it will tell you at what level they pass.

Colour contrast testing by colour picker

The Paciello Group has a very useful downloadable colour contrast tester – you just use the colour picker to literally pick a colour on your screen and it will tell you what level they pass.

What passes colour contrast requirements?

WCAG2 has a number of different colour contrast requirements, depending on what level you are attempting, how large your text is and whether it is incidental information or a logo.

Level A requirements

There are no Level A requirements for colour contrast.

Level AA requirements

In order to pass colour contrast requirements at Level AA, your standard text must meet a contrast ratio of 4.5:1. But don’t worry about the numbers – both the Juicy Studio and Paciello Group tools will tell you what does and doesn’t meet the standard. If you have large text, it only needs to meet a contrast ratio of 3:1. Large text is at least 18 points (0r 1.5em), or bold 14 point (or 1.2em). Logos and incidental text do not need to meet colour contrast requirements.

Level AAA requirements

In order to pass colour contrast requirements at Level AAA, your standard text must meet a contrast ratio of 7:1. With large text you need to meet a contrast ratio of 4.5:1. Logos and incidental text do not need to meet colour contrast requirements.

Use of colour

It is also important that you do not use colour alone to convey information. So you cannot use:

• a particular colour to represent invalid fields (ie “the fields in red are invalid” would be a failure)
• a particular colour to indicate a legend in a graph
• a particular colour to highlight rows in a table

Unless you also use some other form of indication.

For example, with a form, you could also add text that indicates the field is invalid. For a graph, you could also use a patterned background. To highlight specific rows, you could also use a visual indicator, such as an icon (with an appropriate ALT attribute of course).