Spotlight 15

Contrast

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


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. 

Image description in the transcript.
Colour contrast ratio

Colour Contrast Ratio Image Transcript

Colour contrast ratio

There are 4 labelled images that follow the same pattern. 

Image 1 has a white background with black text. Arrows point out the colour contrast between the two colours which is 21 to 1. 

Image 2 only has white. The text points out that the background is white and the text is also white. The colour contrast between the two therefore is 1 to 1. 

Image 3 has a white background with the LCA spotlight salmon colour. The colour contrast between the white and the salmon is 2.4 to 1. 

Image 4 has a dark blue background and white text. The contrast between the two is 4.55 to 1. 

The image ends with the LCA Spotlight logo. 

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.

Image transcription in the transcript.
Contrast (WCAG 1.4.3 & 1.4.6)

Contrast (WCAG 1.4.3 & 1.4.6) Image Transcript

Contrast (WCAG 1.4.3 & 1.4.6)

The table shows that the AA compliance for standard text size is a minimum 4.5 to 1, while the AAA compliance is a minimum 7 to 1. 

The AA compliance for larger texts (18 points or 24 pixels and above, or 14 points or 18.56 pixels and above - if bolded) is a minimum 3 to 1, while for AAA compliance, it’s 4. 5 to 1. 

The image ends with the LCA Spotlight logo.

Compliance examples

Image description in the transcript.
Colour contrast compliance examples

Colour Contrast Compliance Examples Image Transcript

Colour contrast compliance

There are 4 labelled images that follow the same pattern. 

Image 1 has a white background with black text. The colour contrast is 21 to 1. The compliance for AA and AAA levels are both met. 

Image 2 only has white text on a white background. The colour contrast is 1 to 1. The compliance for AA and AAA levels are not met.

Image 3 has a white background with text of the LCA spotlight salmon colour. The colour contrast is 2.4 to 1. The compliance for AA and AAA levels are not met.

Image 4 has a dark blue background and white text. The contrast is 4.55 to 1. The AA compliance is met, while the AAA compliance is only met for larger texts. 

The image ends with the LCA Spotlight logo. 

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. 

Image description in the transcript.
WCAG 1.4.11 Non-text Contrast (AA)

WCAG 1.4.11 Non-text Contrast (AA) Image Transcript

WCAG 1.4.11 Non-text Contrast (AA)

The labelled image shows a screen with a white background, a dark blue Botton with the text on the button having white colour. The arrows point at each element and other arrows shows that the contrast between each of the three elements is a minimum of 3.1. 

The image ends with the LCA Spotlight logo. 

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

Image description in the transcript.
WCAG 2.4.13 Focus Appearance (AAA)

WCAG 2.4.13 Focus Appearance (AAA) Image Transcript

WCAG 2.4.13 Focus Appearance (AAA)

The labelled image shows a part of the LCA Spotlight screen. There are 2 images of arrows on the website pointing towards the previous and next pages. The previous page icon has a dark blue rectangle around it. The label shows that it is the focused state for keyboard users. The next arrow doesn’t have a rectangle around it and the label shows that it’s the unfocused state. The annotations say that the contrast between the focused and unfocused state is minimum 3.1.  

The image ends with the LCA Spotlight logo. 

Final notes

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

Resources:

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