Success Criteria for graphics-contrast exploration

A page to explain and work through how to do multi-colour contrast for graphics.

The aim of this proposed Success Criteria (SC) is to ensure people with low vision can understand graphics presented. There are two categories these fit into:

1. Simple, a single-colour graphic against a uniform background.
2. Complex, something with multiple graphics elements and/or multiple colours and/or multiple backgrounds. For example, diagrams, charts, graphs etc.

It is not trying to cover photographs or paintings. Whilst those might (arguably) convey information, it is meant in the sense of graphics created to convey information, rather than pictures (or paintings) captured.

The first case is fairly straightforward, but the second is more difficult. What it is trying to say for complex graphics is:

For each element of the graphic required for understanding, it is discernible.

This is a similar aim to WCAG2's 1.3.1 which basically says "for each element check that it is using the appropriate structure". The checking for understanding aspect is fundamental for this SC to work.

It is also worth noting that many complex graphics / diagrams already fail 1.4.1 Use of Color, it is quite hard to find examples which fail on contrast without already failing on colour-use.

Example 1

Let's take a relatively good example, a line chart which doesn't rely on colour alone:

Lets take the same example, and remove everything not needed for understanding, and measure the contrast for each element:

1. Purple (#DB3EDA) on white, large, 3.7:1
2. Green (#78A81E) on white, large, 2.8:1
3. Orange (#FD8824) on white, large, 2.4:1
4. Blue (#1EBBCB) on white, large, 2.3:1
5. Grey (#888888) on white, large, 3.5:1
6. Black on white.

The lines and symbols at each point are thicker than 3px, but only one of the lines has sufficient contrast. This chart could pass by increasing the contrast of the lines to over 3:1, or including an alternative such as showing the values on the chart or elsewhere.

Example 2

A pie chart with labels and values. (NB: the text is embed in the graphic which fails 1.4.5 Images of Text, but assume they were SVG or similar for the purpose of this example.)

As the chart has values included, the bits you need to discern to understand are:

1. Black (#0B0806) on tan (#FEBE84), small, 12:1
2. Black on blue/purple (#8083FC), small, 6:1
3. Black on blue/purple (#7E81FB), small, 6.4:1. But, overlaps with another letter with almost no contrast.
4. Black on tan (#FEBE84), small, 12:1
5. Black on green (#84FD85), small, 14:1
6. Black on pink (#FD8081), small, 7.3:1

As you do NOT need to discern the actual pie slices, this is a "Not applicable" under this SC, and would pass under 1.4.3. Adding labels and values is a really good way of passing / avoiding this SC, because you are conveying the meaning using a method that includes contrast.

There are many other examples examined previously that it is worth reviewing.

Success Criteria Text

Going back to the aim: For each element of the graphic required for understanding, it is discernible.

Does the SC text meet that aim?

The visual presentation of graphical elements that are essential for understanding the content have a contrast ratio of at least 4.5:1 against their immediate surrounding background, except for the following:

• Thicker: where the minimum width and height of the element is at least 3px the graphic has a contrast ratio of at least 3:1;
• Captures: Photographs or paintings have no minimum contrast requirement;
• Logotypes: Graphics that are part of a logo or brand name have no minimum contrast requirement.

Graphical element is defined as: A type of non-text content that is intended to be discerned from its surroundings or other graphics. A graphical element could be a stand-alone single color icon, or one element of a more complex graphic such as a graph. It does not include captures of physical scenes such as photographs or paintings.

Essential is defined in WCAG as: if removed, would fundamentally change the information or functionality of the content, and information and functionality cannot be achieved in another way that would conform.

The key terms then are "graphical element" & "important information", does that work?

Example of making a pie chart accessible

A few examples to show where each aspect passes/fails the contrast related checkpoints. NB: For the purpose of these examples I'm ignoring text-in-images, to pass 1.4.5 Images of Text you'd need to implement the labels and values as positioned text, or have an alternative.

The 'understanding' we are looking for is the proportions of market share for each browser. Therefore you need to understand which slice is which browser, and either the value (percentage) or the size of the slice compared to others.

Image of pie chart	Notes
	Example 3 This example fails on: Colour alone (1.4.1 Use of Color), as you have to map from key to the pie slices. Contrast of most of the slices against white is under 3:1.
	Example 4 Passes colour-alone, as each slice is labeled, but without values next to each label you need to discern the edges of the pie slices in order to understand the proportions. It fails: The contrast of each slice against it's adjacent slices is under 3:1.
	Example 5 - Pass Passes as each slice is labeled with a value, so discerning the pie slices is not required. (It would just need to pass 1.4.5 by implementing the text as text, or have an alternative.)
	Example 6 The labels and values are within the slices, so either the slices or the text needs to be discernible. It fails: 1.4.3 because the small black text on several slices does not have 4.5:1. This new SC, because the slices to not have sufficient contrast with each other. It would need to pass one or both in order to pass overall. It could take the same approach as example 5, or you could put each label on a light background to provide the contrast.
	Example 7 The labels do not include the value, so the slices need to be discerned against their surrounding colour/border. It fails: This new SC, because the slices do not have sufficient contrast with the white background. Also, the lines between safari/opera/other would need to pass at 4.5:1 as they are not 'thick'.
	Example 8 - Pass The labels do not include the value, so the slices need to be discerned against their surrounding colours. It passes because each slice has sufficient contrast against it's surroundings. As the surroundings are white that is the basis for checking contrast, but note that the white background/border between safari/opera/other is not 'thick' (over 3px wide), so those slices need to pass at 4.5:1 against white, or 3:1 against each other.