Colour can be a useful way to highlight information, but colour should not be the only means of communicating important information.

Text and important visual elements also need enough contrast so they are easy to see and understand.

Do not rely on colour alone

Keep in mind that some people may not be able to distinguish between the colours you have used so it is recommended to use another visual or text cue as well. For instance, if you were to print the information in black and white, would it still make sense?

Example


Instead of:

What is the capital of Ireland?

  • Cork
  • Dublin
  • Galway

Try:

What is the capital of Ireland?

  • Cork ✖
  • Dublin ✔
  • Galway ✖

Contrast basics

To satisfy the required WCAG 2.2 Level AA criteria, normal text generally needs a contrast ratio of at least 4.5:1 against its background.

Large text has a lower requirement of 3:1, and this also applies to important graphical elements and controls.

Reviewing colours

  • Check the contrast of text placed on solid colours, gradients and images
  • Check links, buttons and other controls in different states, including focus, selected and active states
  • Use text or symbols as well as colour to identify important information
  • Label errors rather than showing them only with a red border
  • Mark required fields clearly rather than relying only on a coloured indicator
  • Give charts and graphs labels, patterns or markers as well as different colours
  • Make selected or active items identifiable through more than a colour change
  • Make links recognisable without just relying on a subtle colour difference

Colour contrast checkers