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.
Text Content
The City standard requires all text be presented at a contrast ratio of at least 7:1, unless it is large scale text (see Text Size section below). Most toronto.ca body text content meets this requirement since black text on a white background has a contrast ratio of about 21:1.
Large scale text can be be presented at a contrast ratio of at least 4.5:1. Higher contrast ratios are prefered.
Link text must have a contrast ratio of at least 3:1 with any surrounding body text.
For information on how to determine the contrast ratio of your content, see the section How to Measure Colour Contrast Ratios.
Text Size
As base text-sizes are increasing across the web, the notion of “large” text continues to evolve.
WCAG 2.1 defines “large scale” text based on both the size of the font and its thickness (i.e., content in boldface). The default font size for most modern browsers is about 16px. If the browser’s default size is 1.0 rem or 100%, then for WCAG, large scale text is:
1.2 rem or larger (if bold) or 1.5 rem or larger (if not bold);
120% or larger (if bold) or 150% or larger (if not bold) of the default size for body text.
Boldface is a font-weight of 700 or higher.
Font size (rem) | Font size (%) | Expected contrast ratio |
|---|---|---|
Less than 1.5 and not boldface | Less than 150% and not boldface | 7:1 |
1.2 or more and boldface | 120% or more and boldface | 4.5:1 |
1.5 or higher | 150% or higher | 4.5:1 |
Large scale text minimum size (where body text font is 1.0 rem or 100%)
Non-text Content
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).
Exemptions
According to WCAG 2.1, the following are exempt from these contrast requirements:
Logos and flags.
Photographs and depictions of real life.
Images that need to provide accurate colour details (e.g, medical images).
Colour gradients (e.g., heatmaps).
How to Measure Colour Contrast Ratios
Colour contrast is described in terms of “foreground” and “background”. These terms might be confusing in different situations.
Typically, the contrast ratio of body text is the difference between the colour of the text itself (the foreground) and the colour of the background behind it. Automated contrast testing tools can identify most issues.
More often, the contrast ratio concerns adjacent colours and the distinction between two pieces of content is based on colour alone. Automated tools may not help identify issues. Some examples are:
Links that occur in neighbouring body text.
Text with drop-shadow or other shadow effects.
Background gradients.
Background images.
Transparency.
Automated tools
Automated tools can only help you to evaluate the accessibility of your web content; they cannot tell you if your web content is accessible.
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).
Testing with the Colour Contrast Analyser (CCA) is recommended only for documents or images where it is not possible to accurately extract the colour information.
The CCA provides eyedropper buttons located next to each text box to grab the colour you are checking. This is not as reliable as knowing the actual colour codes because browsers use the colour space provided by the operating system to render colours. A colour picker may end up picking the converted colour rather than the intended colour.
While the CCA’s result may not be entirely accurate, any result that barely meets the contrast requirements outlined earlier should be considered suspect and in need of enhancement.
The CCA will provide a report on whether the colours are WCAG compliant. Generally, you want:
Body text: 1.4.6 Contrast (Enhanced) (AAA)
“Pass for large and regular text” (for all body text)
“Pass for large text only. Fail for regular text” (if only checking large scale text)
Adjacent colours: 1.4.11 Non-text Contrast (AA)
“Pass for UI components and graphical objects”
Below is a screenshot of the CCA interface.
[Source: https://github.com/ThePacielloGroup/CCAe/raw/master/cca.png]
