Spotlight 15


(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 4 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. 

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. 

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


Discussion questions:

Get Involved: Come to the LCA Spotlight LinkedIn group and join the conversation.

When you post in the community, use the hashtag #LCASpotlightContrast

Spotlight 14: Writing accessible copy

Spotlight 16: Images of texts