WCAG and colours
It’s important to understand how WCAG talks about colour, in order to avoid confusion.
- When they talk about colour, they mean colour hue (for example, red versus green).
- When they talk about contrast, they are referring to differences in colour lightness or luminance (for example, dark versus light).
Enough (colour) contrast
WCAG defines the minimum and recommended contrast ratios between the colour of the foreground elements (such as text, icons, and focus outlines) and the background. There are different requirements for different types of content and levels of compliance:
- Contrast for text (Level AA): 4.5:1 for most text, 3:1 for large text
- Contrast for text (Level AAA): 7:1 for most text, 4.5:1 for large text
- Contrast for non-text elements and states: 3:1 (this applies to icons, the background of a button against the background of the page, etc.)
Although most colour contrast issues can be evaluated via automated testing, manual testing is needed when dealing with interactive elements, as it is common for them to change colours when they are hovered, focused, or activated.
To make sure that there’s enough contrast between, for example, the colour on hover and the colour on active, you can use a developer tool or browser extension that updates in real-time as you interact with the site, such as the WCAG Color contrast checker Chrome extension.
Please note that the WCAG contrast requirements aren’t always optimal; some combinations that pass the contrast check are still difficult to read for most people (for example, red text on a black background). Use your eyes and brain!
Never colour (hue) alone
We need to make sure that information is never conveyed with colour hue alone, because some people may not be able to perceive it. For example:
- A required field can be marked by a blue border and the word “required” next to it.
- A button toggling between on and off states can be denoted with, for example:
- A change in colour hue between green and red, plus the words “ON”/”OFF” is toggled.
- A change in lightness (black to grey), with or without a change in text.
- A change in colour hue and lightness (intense green to light red), with or without a change in text.
Best practices recommend that the user is able to change the default foreground and background colours (for example using their own CSS files to locally override the styles on the browser). You can test this with the developer tools or a browser extension that allows you to use custom colour schemes, such as the Care your Eyes Chrome extension.
- The Myths of Color Contrast Accessibility, by Anthony (2019)
- WCAG Color contrast checker on the Chrome web store
- Care your Eyes on the Chrome web store
- Success Criterion 1.4.1: Use of Color [Level A] on WCAG 2.1
- Success Criterion 1.4.3: Contrast (Minimum) [Level AA] on WCAG 2.1
- Success Criterion 1.4.6: Contrast (Enhanced) [Level AAA] on WCAG 2.1
- Success Criterion 1.4.11: Non-text Contrast [Level AA] on WCAG 2.1