The objective of this technique is to ensure graphical icons provide enough contrastfor people with vision impairments. Not all graphics are within the scope ofSC 1.4.11 Non-text contrastbut if the icons are required to understand the content, then the icons need to havea 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 techniquefocuses 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.
Example 1: Solid icon color against the background
A solid icon such as a telephone symbol uses orange on a white background. The colororange (#E3660E) is tested against the white background (#FFFFFF) and it has a contrast ratio of 3.4:1.
Example 2: Solid icon color against a custom background
A solid icon such as a telephone symbol used within an orange background. The orangeand white colors are the same as in example 1, in this case the contrast against thewhite background is not relevant, the white icon within the orange background is whatprovides the information in the icon and as a result needs to meet the contrast requirement.
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-bluegradient background. The first test of the icon should be against the darkest (leastcontrasting) background that is adjacent to the icon color. If that is at least 3:1,it passes the success criterion.
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 stillunderstandable where it does not have contrast against all of the background. If youfind the part of the gradient where it does not meet a 3:1 ratio with the graphicand treat that part as if it was removed, does the icon still convey the appropriatemeaning?
A method of visualizing this is to remove the non-contrasting area and check thatyou can still understand the icon. If so, it is sufficient. The images below showsan icon on a gradient background, and a second version where it removes the area ofthe icon that does not meet the 3:1 contrast ratio. It is still recognizable as aphone icon, so passes the success criterion.
For each graphical object required for understanding use a color contrast tool to:
Determine the foreground color of the graphical object.
Determine the adjacent background color. If the background color is a gradient orpattern, identify the color with the least contrast to the foreground color.
Check that the contrast ratio is equal to or greater than 3:1.
If part of the background area does not meet 3:1 with the foreground, assume thatparts of the icon adjacent to the area or areas are not visible.
Check that the icon is still recognizable without any area of insufficient contrast.