Visual Contrast

The purpose of this document is to help you better understand how colours and colour contrast can be used in an accessible design according to the City of Toronto Digital Accessibility Standards and Practices.

Note

WCAG 2.1 specifies multiple contrast ratios that apply to various contexts. For body text alone, WCAG has two different contrast levels WCAG 1.4.3 Contrast (Minimum) - Level AA and WCAG 1.4.6 Contrast (Enhanced) - Level AAA which are further nuanced based on the size of the text and the use of boldface. For user interface components and graphical objects, WCAG 1.4.11 Non-text Contrast applies. This document attempts to simplify some of the confusion that might occur.

...

Users need to be able to distinguish foreground from background with all UI elements beyond body text.

Interactive Elements

UI components such as icons, inputs, buttons, their outlines, and their various states must have sufficient contrast.

• When colour is used to distinguish state, this difference needs to have a contrast of at least 3:1 against adjacent colour(s).

• Components must be sufficiently distinct from their own background. This contrast ratio must be at least 3:1 against adjacent colour(s).

Data Visualizations

Different parts of a data visualization need to be distinguishable from other parts for the information and their relationships to be fully understood. Charts, maps, and other graphical objects that rely on colour for comprehension must have have a contrast ratio of at least 3:1 against adjacent colour(s).

...

• Links that occur in neighbouring body text.

• Text with drop-shadow or other shadow effects.

• Background gradients.

• Background images.

• Transparency.

Automated tools

To check contrast, we recommend using the WAVE browser extension (Chrome or Firefox) or the online WAVE tool.

WAVE provides a contrast tab that can help to identify areas of concern.

Manual testing

Wherever possible, test the actual colours being used, rather than using an eyedropper tool. For web, test the colours used in the CSS.

If you know the colours you are checking (e.g. in RGB or HEX values or CSS color keywords), use the WebAIM Color Contrast Checker. Simply enter the colour information as a HEX triplet (e.g. #000000) into the text boxes provided for foreground and background colours. If you do not know the HEX value of a colour, there are various tools available to convert RGB or CSS colour keywords to HEX values (e.g. w3schools.com Color Converter).

If the content in question is a non-editable document (e.g., a PDF), an image in part of a document or web page, or web content with less than 100% opacity, we recommend using the Colour Contrast Analyser (CCA).

...