WCAG and colors
It’s important to understand how WCAG talks about color in order to avoid confusion.
- When they talk about color, they mean color hue (for example, red versus green).
- When they talk about contrast, they are referring to differences in color lightness or luminance (for example, dark versus light).
Enough (color) contrast
WCAG defines the minimum and recommended contrast ratios between the color 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 color 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 colors when they are hovered, focused, or activated.
To make sure that there’s enough contrast between, for example, the color on hover and the color 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 color (hue) alone
We need to make sure that information is never conveyed with color 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 color 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 color hue and lightness (intense green to light red), with or without a change in text.
Customizing colors
Best practices recommend that the user is able to change the default foreground and background colors (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 color schemes, such as the Care Your Eyes Chrome extension.
Resources
- 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