Using relative lightness in addition to color to convey information

Gxx: Using relative lightness in addition to color to convey information

Applicability:

• SC 1.4.1 (Use of Color)

Description:

The objective of this technique is to show how color can be used successfully and accessibly in conveying information. A major purpose of this technique is also to make it clear that color as used in the success criteria means hue and not lightness or darkness.

• Red and pink can be the same color (hue) with just different amounts of lightness.
• White is a color (mixture of colors) (hues).
• Black is the absence of all colors (hues).

So in this technique one can use lightness along with color (hue) in order to cause it to be different visually to a person with a difference in their color perception or even the lack of ability to view color at all.

Note that for people with color vision differences, it is not alway possible to easily predict what the image will look like, nor is is possible to equate black and white vision to a color deficiency. That is, something that is clear in black and white might not be clear to a person with a color vision difference. For example, if a person has no ability to perceive red, then something presented in high wavelength red (fully saturated) (contains no green or blue) will look black to them even though it would not look black to a black and white camera.

If lightness/darkness is used as the only other cue besides hue then it is advised that the page be checked with tools that can simulate various color deficiencies to check this.

However a contrast tool may be easier to use to compare the lightness difference between the two items .

For items that are adjacent (e.g. two bars on a chart that touch each other) a contrast of 4.5:1 or better is recommended. For items that are not adjacent, a contrast of at least 7:1 and preferably higher is recommended.

Boldness (thickness) can also be used both to make a something even more different and to ensure that it is visually distinguishable / noticeable.

Examples

Example 1: Bar and line charts

There is a chart showing the different ratings for two computers across a range of tests. The two computers are coded red and green. The two bars for each test are side by side and touch each other. The green bar is made lighter so that the contrast ratio between the red and the green bar is 5:1. In the legend the colors are also presented touching. Although color is used to show the the two computers, the relative contrast (lightness) between them is sufficient that it is easy for all people, regardless of their color vision, to tell which is which.

On the same page it compares the two computers with a line chart. Although the lines do touch at one point, in order to be sure, a contrast of 7:1 is used between the two lines. This means that one line has less than 4:1 contrast with the white background but this is not a problem since there is not difficulty telling the line from the background and the 4.5:1 contrast rule only applies to text for readability and not to charts.

Example 2: Links are shown by being a different color plus bold

On a page it is desired to not have underlines in the paragraph to show links. So colors are used instead. However it is not possible to have the color of the links be enough different in lightness from the regular text and still be sufficiently different from the background to meet the color contrast provision. The links could be 4.5:1 different from both a white (or black) background and still be 4.5 different than each other. This could be done and would technically meet the success criteria but would not meet the 7:1 or better contrast recommended by this technique for things that are not in contact with each other. In this case boldness is also used to further enhance the visual difference.

Example 3: Use of other techniques for multiple simultaneous comparisons

The use of the lightness technique is limited to simple pairs. In this example there are 4 computers being compared so it is not possible to have them all have enough contrast with each other. The use of position in addition to lightness was used on one chart and patterns are used in addition on the line chart.

Related Techniques

• G14: Ensuring that information conveyed by color differences is also available in text
• G17: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text
• G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
• G145: Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text
• G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast
• G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them

Tests

Procedure

1. Find all the places where differences in color (hue) is used to convey information in any way
2. Check to see if there is some other means of conveying the information (e.g. underline, bold, etc.)
3. Check to see if the contrast between the two items (or any two items) is greater than 4:5:1 if they are touching and 7:1 if they are not.

Expected Results

• Either # 2 or #3 is True