Understanding Graphics Contrast

Intent

This section contains the main explanatory content of the Understanding. It explains why the Guideline or Success Criterion exists and, at a high level, how to meet it.

The intent of this success criterion is to apply the contrast requirements to important graphical elements in a similar way that it is applied to text in 1.4.3 Contrast (Minimum).

If a graphic is needed to understand the content or functionality of the webpage then it should be perceivable for people with low vision or other impairments.

The term "graphical object" is intended to apply to stand-alone icons such as a print icon (with no text), and the important parts of a more complex diagram such as each line in a graph. Not every graphical object needs to have sufficient contrast with its surroundings, only those that are required to understand what the graphic is conveying.

Graphics that are very thin are harder to perceive, therefore have a higher contrast requirement of 4.5:1. Graphics that are thicker or are solid shapes have a lower requirement of 3:1.

The term essential information is used as many graphics do not need to meet the contrast requirements. If a person needs to perceive a graphic, or part of a graphic (a graphical object) in order to understand the content it should have sufficient contrast. That is not a requirement for:

For designers developing icons that need to be perceived clearly, see the following example:

stroke comparisons

Example of several sizes of icon having sufficient contrast at different sizes.

The thicker lines (3px or more) have 3:1 contrast (#949494 on #FFFFFF), the small lines (2px or less) need a darker grey (#777777 on #FFFFFF).

Notes on how the contrast and thickness were derived

The contrast levels are transferred directly from the current 1.4.3 Contrast (Minimum).

The size of 3px for 'thicker' was selected as it aligns with the large-text requirement of 1.4.3 Contrast (Minimum).

Text size and stroke

24px (large) text, and a zoomed in view of a 24px word to show the pixels that make it up. The "i" character is 3 pixels wide.

Benefits

This explains how following the success criterion benefits particular types of users with disabilities.

Examples

Examples in Understanding pages are normally simple lists of hand-waving examples. Sometimes, examples are instead provided in sub-sections with headings. In either case, examples should stay high-level and not get into code specifics, which is for techniques.

Pie Charts

Pie charts make a good case study for this success criteria, the following pie charts are intended to convey the proportion of market share each browser has. NB: The actual figures are made up, these are not actual market shares.

Failing pie chart

Fail: The following pie chart has labels for each slice (so passes 1.4.1 Use of Color), but in order to understand the proportions of the slices you must discern the edges of the slices (the graphical objects conveying essential information), and the contrast between the slices is not over 3:1.

Not applicable pie chart

Not applicable: The following pie chart has visible labels and values that convey equivalent information to the graphical objects (the pie slices):

Passing pie chart

Pass: The following pie chart has visible labels, and sufficient contrast around and between the slices of the pie chart (the graphical objects):

Note that on the last example, the spaces between the small slices is less than 3px wide, therefore those slices need a 4.5:1 contrast ratio against the white background.

Many other examples have been worked through on different graphic types.

Resources

Techniques

This section references techniques that can be used to meet the Guideline or Success Criterion. There are sub-sections for sufficient techniques, advisory techniques, and failures.

Remove any parts of the template that are not used, such as the section and heading for situations, sub-lists of techniques, or the "AND" construction. Also remove the square brackets around placeholder optional components.

Sufficient

Techniques that are sufficient to meet the Guideline or Success Criterion.

Situation

Advisory

Techniques that are not sufficient by themselves to meet the Guideline or Success Criterion.

Same template as sufficient techniques.

Failure

Techniques that document conditions that would cause the page not to meet the Guideline or Success Criterion, even if sufficient techniques are also used.

Same template as sufficient techniques.