diff --git a/understanding/21/img/simple-line-graph.png b/understanding/21/img/simple-line-graph.png index 0df127d4b4..81a8280634 100644 Binary files a/understanding/21/img/simple-line-graph.png and b/understanding/21/img/simple-line-graph.png differ diff --git a/understanding/21/non-text-contrast.html b/understanding/21/non-text-contrast.html index 831d7f56c1..45cdf1aaef 100644 --- a/understanding/21/non-text-contrast.html +++ b/understanding/21/non-text-contrast.html @@ -38,7 +38,9 @@

Adjacent colors

A standard text input with white adjacent color outside the component
-

If the inner background of the component provides contrast with the adjacent background color, a border can be ignored for the purpose of contrast. For example, an input that has a light background on the inside of the field and a dark background around it, could have a dark or a light colored border. As the difference between backgrounds provides contrast, the border is not important for this success criterion.

+

If components use several colors, any color which does not interfere with identifying the component can be ignored for the purpose of measuring contrast ratio. For example, a 3D drop-shadow on an input, or a dark border line between contrasting backgrounds is considered to be subsumed into the color closest in brightness (perceived luminance).

+ +

The following example shows an input that has a light background on the inside and a dark background around it. The input also has a dark grey border which is considered to be subsumed into the dark background. The border does not interfere with identifying the component, so the contrast ratio is taken between the white background and dark blue background.

A text box with a dark background and light border, with a white background. @@ -54,6 +56,7 @@

Adjacent colors

It is possible to use a flat design where the status indicator fills the component and does not contrast with the component, but does contrast with the colors adjacent to the component.

+
Four radio buttons, the first is a plain circle labelled 'Not selected'. The second shows the circle filled with a darker color than the border. The third is filled with the same color as the border. The fourth has an inner filled circle with a gap between it and the outer border.
The first radio button shows the default state, the second and third show the radio button selected, and filled with a color that contasts with the color adjacent to the component. The last example shows the state indicator contrasting with the component colors.
@@ -189,7 +192,7 @@

Graphical Objects

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

- +
@@ -211,7 +214,7 @@

Graphical Objects

- @@ -219,9 +222,9 @@

Graphical Objects

- @@ -250,7 +253,10 @@

Required for Understanding

The term "required for understanding" is used in the Success Criterion 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. However, that is not a requirement when:

Image
A yellow arrow pointing down with a pound sign (currency) in the middle.

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 low-currency symbol can be understood with recognition of the shape (down arrow) and the currency symbol (pound icon with the shape which is part of the graphic). 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.
A line chart of votes across a region, with 4 lines of different colors tracking over time.

In order to understand the graph you need to discern the lines and shapes for each condition. Therefore each line and colored shape is a ‘graphical object’ in the graph and should be over 3:1 against the white background. Most of them have good contrast except the green triangles.

+

In order to understand the graph you need to discern the lines and shapes for each condition. To perceive the values of each line along the chart you need to discern the grey lines marking the graduated 100 value increments.

The graphical objects are the lines in the graph, including the background lines for the values, and the colored lines with shapes.

-

The lines should have 3:1 contrast against their background, but as there is little overlap with other lines they do not need to contrast with each other. (See the testing principles below.)

+

The lines should have 3:1 contrast against their background, but as there is little overlap with other lines they do not need to contrast with each other or the graduated lines. (See the testing principles below.)