Skip to main content Skip to main menu

Web Accessibility Requirements for Non-Text Colour Contrast

Under the Information and Communications Standards of the AODA, organizations must make their websites and web-based apps accessible. Organizations must do so by making their websites compliant with Web Content Accessibility Guidelines (WCAG) 2.0, Level AA. This international standard gives web developers guidelines on how to make their webpages accessible to computer users with disabilities. However, updates to the Information and Communications Standards could require organizations to comply with more recent versions of WCAG. The World Wide Web Consortium (W3C) released an improved version of these guidelines, version 2.1, in 2018. Moreover, W3C will release WCAG version 2.2 in September 2022. This article outlines WCAG 2.1’s web accessibility guidelines for non-text colour contrast.

Web Accessibility Guidelines for Non-Text Colour Contrast

In addition to colour contrast between text and background, web designers must also ensure enough colour contrast between a website’s background and all non-text content in the foreground. For example, non-text content includes:

  • Graphics
  • Controls, or user interface components
  • Elements that change state, such as buttons that look different when selected

There should be a contrast ratio of 3:1 between these non-text elements and their background. This ratio ensures that users who are visually impaired can perceive graphics and controls, as well as text.

If non-text elements have borders around them, these borders do not need to contrast with the elements or the background. However, the graphic, control, or clickable element within a border should always contrast with the background.

Advanced Requirements

The WCAG webpage provides the full list of requirements, as well as technical guidance on how to implement them. The AODA only requires websites to follow guidelines in version 2.0, level AA. However, the WCAG webpage provides guidelines at level AAA. While websites do not need to follow these guidelines, they can choose to follow them as a best practice. Websites that follow more guidelines have the chance to welcome more visitors and do more online business.