(WCAG 1.4.3, 1.4.6 & 1.4.11)
In Spotlight 13, we talked about supplementing colours. In this spotlight, we continue talking about colours, but from a different perspective.
Visibility is important for any user, but especially for people with low vision or colour vision deficiency. There are 3 WCAG guidelines outlining the requirements to create enough contrast between the different elements on the screen.
Before we dive in, let’s quickly define the colour contrast ratio. Colour contrast ratio calculates the difference between the brightness of two colours. For example, white text on a white background would be invisible, and the ratio is 1:1, while the contrast ratio between black and white is 21:1.
WCAG 1.4.3 Contrast (Minimum) (AA) criterion states that the contrast between the text and the background has to be at least 4.5:1. This applies to any text on the screen, including hover states, regardless of whether it’s in the body text, the navigation, or a button.
However, there are several things to consider here. For text that is 18 points (24 pixels) in size or larger, or bolded text of size 14 points (18.56 pixels) and above, a colour contrast ratio of 3:1 would suffice. That is because the size or the bolding makes it easier to read. In addition, texts in logos and texts that don’t need to be legible are exempt. For example, disabled buttons, text that incidentally appears on images but has no significance, or text that is part of a decorative image doesn’t have to meet the contrast ratio.
To comply at a higher level, the extension of this criterion, WCAG 1.4.6 Contrast (Enhanced) (AAA) requires the contrast ratio to be 7:1 for standard text and 4.5:1 for large or bolded text.
Another contrast-related criterion is 1.4.11 Non-text Contrast (AA) and it extends to elements on the screen that are beyond text such as user interface components and graphical objects. So, for example, it applies to icons, graphics, links, buttons, input items, visual focus indicators, maps, charts, and their states. The contrast between these elements and any adjacent colours has to be 3:1. The phrase “adjacent colours” means that the colour contrast requirement is not only between the non-text element and the background, but also anything next to it, or on top of it. For example, a segment of a pie chart has to have 3:1 contrast between the background, the adjacent segments and any text on the top of the segment. This is also true for buttons, and links within a paragraph, just to mention a few.
Finally, while it’s not a WCAG requirement, it’s important to mention that people with dyslexia prefer non-white backgrounds.
Follow this link to access WebAIM’s Contrast Checker: WebAIM contrast checker
This article explains the contrast-related guidelines in depth and with examples: Contrast and colour accessibility (WebAim)
Follow this link for the British Dyslexia Association’s Dyslexia-friendly guide: British Dyslexia Association’s Dyslexia-friendly guide
Read W3C’s definition of user interface components: Definition of interface components (w3.org)
Follow this link for a collection of contrast checker tools: Color Contrast Analyzers & WCAG Color Contrast Generators (digitala11y.com)
This tool can tell you which combinations of your brand colours can work together (limited to text size): Accessible colour matrix (Github)
This tool tells you which combinations of your brand colours can work together and labels them: Contrast grid
Get Involved: Come to the LCA Spotlight LinkedIn group and join the conversation.
Does your authoring tool make it easy to check the colour contrast within the tool itself or do you have to use external contrast checkers?
What’s your preferred tool for checking colour contrast?
Can you give specific examples of when text is exempt from the criteria?
Can you give examples of when measuring the colour contrast may prove difficult?
When you post in the community, use the hashtag #LCASpotlightContrast