Colour

Not all users can distinguish between colours. Colour alone should not be relied upon to indicate key information such as links, chart information or selection options. Your user may be:

  • Colour Blind
  • Applying a custom stylesheet that changes the colours on your site
  • Have a cognitive impairment
  • Be using a screen reader

Colour alone should not be relied upon to indicate key information such as links, chart information or selection options.

Colour in Content

Avoid using colour on its own to convey information on its own such as:

"...available options are green"
"required fields are marked in red"

A user may have an impairment that prevents them from perceiving the correct colour, our could be use a screen reader which will not register the colour information at all.

Provide additional text or other distinction along with the colour.

"...available options indicated by the green tick"
"required fields are marked with a red asterisk"

When using icons make sure that you use variations in shape or size as well as colour to distinguish between them. For example, a series of different coloured traffic light icons will be more difficult for some users to perceive than a series of different shaped and coloured icons.

If you have images that are dependent on colour such as a graph or heat map, consider including a hatched key or additional labels.

Read the Guideline

  • Checklist

    chevron_right

    Key things to remember

    • Colour is not the sole means of conveying information
    • Action content, such as buttons and links, can distinguished without colour
    • Labels or hatching provided on graphs and charts