Use of Colour for Accessibility

Examples of different colour contrast pairings

About Inclusion & Accessibility Labs Icon

1.4.1 Use of Colour — Level A

Use of Colour is the name of a Level A success criterion in the Web Content Accessibility Guidelines (WCAG). Level A criteria means that any website or app that fails to meet these guidelines – in this case, any website or app that fails to use colour in a way that is accessible for all users – cannot be considered accessible at even the lowest level of conformance.

The rule states that:

Colour is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Digital Inclusion Icon

Why can’t colour be our only visual cue?

Not everyone can perceive or see colour in the same way as other people, or are able to easily differentiate one colour from another. The use of colour alone to indicate meaning then becomes a barrier for people with disabilities.

Users who have trouble seeing reds and greens will struggle with a game that asks them to click the green button to start and the red button to stop. Colour-blind individuals will be unable to figure out where they have gone wrong in filling out a form if the only indication they’ve made an error is a red border around a text field.

For this reason, web developers cannot rely solely on colour as a visual cue.

IA Labs Icon

How does someone know if they are using colour properly?

There is a simple process to figure out if a website’s use of colour fails to meet digital accessibility standards. Any web developer can ask themselves these two straightforward questions:

  • If colour is removed, does everything still make sense?
  • What has been added besides colour to convey information to users?

No instructions or information (like charts or graphs) should rely on colour alone.

IA Labs circular icon

What are some examples of proper use of colour?

  • Including clear labels or patterns on charts and graphs to supplement the use of colour.
  • Including text labels on buttons to supplement the use of colour.
  • Adding icons and text cues to show invalid or incomplete information in a form.

What are some examples of improper use of colour?

  • Distinguishing links or interactive elements from static text only by the use of colour.
  • Using colour alone to show a user or a system error.
  • Using colour alone to indicate the strength of a password.

When in doubt, return to the guiding questions. This is one of many principles that benefits the users who need it most, but also greatly improves websites for every visitor – clear contrast makes your text more readable for all.

Inclusion & Accessibility Labs Services Icon

How Can IA Labs Help?

As part of our consultations, accessibility audits, and training sessions, we can identify and explain all the contextual nuances that would apply to the WCAG 2.1 Success Criterion 1.4.1 Use of Colour. If you have any questions or need help with any digital accessibility issue, please don’t hesitate to make contact with IA Labs.