...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
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.
...
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%)
...
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 UI 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
| Note |
|---|
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).
| Warning |
|---|
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. |
...