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 4 WCAG guidelines outlining the requirements to create enough contrast between the different elements on the screen. 

Let's start with the definition of 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. 

What the criteria say

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.

Compliance examples

What colour contrast applies to

While it's easy to think that colour contrast only applies to text and their background colour, that's not the case. According to 1.4.11 Non-text Contrast (AA), colour contrast extends to other elements on the screen, 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. 

Contrast for focus indicators

Lastly, learning content creators are typically not responsible for focus indicators, because these are determined by the authoring tools, but there's a new criterion in WCAG 2.2 that we want to mention. Focus indicators, by the way, are visual cues used most commonly by assistive technologies to highlight the selected element. Mouse users can see the placement of their mouse by the cursor, but for keyboard users, the focus indicator is commonly an outline around the element. According to 2.4.13 Focus Appearance (AAA), when the keyboard focus indicator is visible, the contrast ratio between the focused and unfocused states should be at least 3:1. 

Final notes

Finally, while it’s not a WCAG requirement, it’s important to mention that people with dyslexia prefer non-white backgrounds. 

Resources:

• 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

Discussion questions:

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