Technique G207:Ensuring that a contrast ratio of 3:1 is provided for icons

Applicability

All technologies that support graphical icons.

This technique relates to 1.4.11: Non-text Contrast (Sufficient).

Description

The objective of this technique is to ensure graphical icons provide enough contrast for people with vision impairments. Not all graphics are within the scope of SC 1.4.11 Non-text contrast but if the icons are required to understand the content, then the icons need to have a contrast ratio of at least 3:1.

The success criteria for non-text contrast uses the term "graphical object" to cover small simple graphics, and parts of larger complex graphics. This technique focuses on solid color icons used on solid or gradient backgrounds.

When choosing the colors for graphics, consider the color(s) adjacent to that graphic, and test that the contrast ratio is at least 3:1.

A selection of tools and applications for testing contrast ratios can be found in Understanding SC 1.4.3 Contrast (minimum).

Examples

Example 1: Solid icon color against the background

A solid icon such as a telephone symbol uses orange on a white background. The color orange (#E3660E) is tested against the white background (#FFFFFF) and it has a contrast ratio of 3.4:1.

Orange icon on white background

Example 2: Solid icon color against a custom background

A solid icon such as a telephone symbol used within an orange background. The orange and white colors are the same as in example 1, in this case the contrast against the white background is not relevant, the white icon within the orange background is what provides the information in the icon and as a result needs to meet the contrast requirement.

Orange icon on white background

Example 3: Solid icon with a gradient background

A solid icon such as a telephone symbol using a dark blue icon on a white-to-blue gradient background. The first test of the icon should be against the darkest (least contrasting) background that is adjacent to the icon color. If that is at least 3:1, it passes the success criterion.

Dark blue icon on white-to-blue background.

Example 4: Solid icon with gradient background overlapping in contrast

A solid icon on a gradient background can overlap in contrast if the graphic is still understandable where it does not have contrast against all of the background. If you find the part of the gradient where it does not meet a 3:1 ratio with the graphic and treat that part as if it was removed, does the icon still convey the appropriate meaning?

A method of visualizing this is to remove the non-contrasting area and check that you can still understand the icon. If so, it is sufficient. The images below shows an icon on a gradient background, and a second version where it removes the area of the icon that does not meet the 3:1 contrast ratio. It is still recognizable as a phone icon, so passes the success criterion.

Dark blue icon on white-to-blue background that is dark at the bottom. Dark blue icon on white-to-blue background.

Other sources

No endorsement implied.

Tests

Procedure

For each graphical object required for understanding use a color contrast tool to:

  1. Determine the foreground color of the graphical object.
  2. Determine the adjacent background color. If the background color is a gradient or pattern, identify the color with the least contrast to the foreground color.
  3. Check that the contrast ratio is equal to or greater than 3:1.
  4. If part of the background area does not meet 3:1 with the foreground, assume that parts of the icon adjacent to the area or areas are not visible.
  5. Check that the icon is still recognizable without any area of insufficient contrast.

Expected Results

  • #3 and #5 are true.