Understanding Graphics Contrast

Required for understanding

The term "required for understanding" is used in the success criteria 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:

• A graphic with text embedded or over layed that conveys the same information, such as labels and values on charts.
• The graphic is for aesthetic purposes that does not require the user to see or understand it to understand the content or use the functionality.
• The information is available in another form elsewhere on the page, or linked from the page.
• The graphic is part of a logo or brand name.

Graphical Objects

The term "graphical object" applies 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. For simple graphics such as single-colour icons the entire image is a graphical object. For images made up of multiple lines, colours and shapes they will be made of multiple graphical objects, some of which are required for understanding.

Not every graphical object needs to contrast with its surroundings, only those that are required to understand what the graphic is conveying. Gestalt principles such as the "law of continuity" can be used to ignore minor overlaps with other graphics or colors.

Icon	Notes
	A magnet can be understood by the U shape with lighter coloured tips. Therefore to understand this graphic you should be able to discern the overall shape (against the background) and the lighter coloured tips (against the rest of the U shape and the background). The graphical objects are the U shape (by outline or by the solid red colour), and each tip of the magnet.
	The low-currency symbol can be understood with recognition of the shape (down arrow) and the currency symbol (pound icon with the shape). To understand this graphic you need to discern the arrow shape against the white background, and the pound icon against the yellow background. The graphical objects are the shape and the currency symbol.
	In order to understand the graph you need to discern the lines and shapes for each condition. Therefore each line and coloured shape is a ‘graphical object’ in the graph (which is over 3px in the original page) and should be over 3:1 against the white background. Most of them have good contrast except the green triangles. Notably the purple crosses are not 3px thick, but the contrast is 5:1 and the main line width is 3px wide. The graphical objects are the lines in the graph, including the background lines for the values, and the coloured lines with shapes.
	To understand the pie chart you have to discern each slice of the pie chart from the others. The graphical objects are the slices of the pie (chart).

Taking the magnet image above as an example, the process for establishing the graphical object(s) is to:

• Assess what part of each image is needed to understand what it represents.
  The magnet's U shape can be conveyed by the outline or by the red background (either is acceptable). The grey tips are also important (otherwise it would be a horseshoe), which needs to contrast with the red background.
• Assume that the user could only see those aspects, do they contrast with the adjacent colours?
  The outline of the magnet contrasts with the surrounding text (black/white), and the red and white between the tips also has sufficient contrast.

Due to the strong contrast of the red and white, it would also be possible to only put the outline around the white tips of the magnet and it would still conform.

Gradients can reduce the contrast apparent contrast between areas, and make it more difficult to test. The general principles is to identify the graphical objects required for understanding, and take the central color of that area, and compare it to the other end of the gradient of the nearest adjacent color or colors. @@@ Need to create one or more examples for this.

Contrast for thicker graphics

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.

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

Dynamic Examples

Some graphics may have interactions that either vary the contrast, or display the information as text when you mouseover/tap/focus each graphical object. In order for someone to discern the graphics exist at all, there must be contrasting colours or text in order to find the graphics. Within that area, information available by a conforming method (e.g. focusable elements) can be used to make that information available dynamically as text.

Responsive graphics

If an image changes size depending on the size of the viewport, the image should be tested at the smallest size. Then you can use a contrast analysis tool to pick a colour, and the magnified view with the "eye-dropper" will show the pixels.

Another option is to use the browser's code inspection tools to add a 3px border around the image and compare the size. The measure is in CSS pixels.

Benefits

People with low vision often have difficulty perceiving graphics that have insufficient contrast. This can be exacerbated if the person has a color vision deficiency that lowers the contrast even further. Providing a relative luminance (lightness) difference of 4.5:1 or greater can make these items more distinguishable when the person does not see a full range of colors.

Sufficient

Advisory

• G183: Using a contrast ratio of 4.5:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them