1.3 Use high color contrast for icons and diagrams

When icons are used to provide information, without adjacent text, it's important that all users can understand this content. We have to ask ourselves which pieces of the icon are needed for understanding and then make sure those pieces have high color contrast.

The same is true for graphs and other diagrams. Each piece that is providing information that is not else where on the page needs to have a high color contrast with its adjacent color(s). By doing this we help all of our users, like those with low vision, understand the content.

WCAG 1.4.11: Non-text Contrast Opens in a new window

Details

• Pieces of stand-alone icons, without text, that are required to understand the content need to have a contrast ratio of at least 3.00:1 against adjacent color(s) (measured out to 2 decimal places).
• Pieces of graphs and diagrams required to understand the content need to have a contrast ratio of at least 3.00:1 against adjacent color(s).
• Decorative icons are exempt from this standard
• Logos or brand names are exempt from this standard.

Examples

With the icon below, the white phone is what is needed to understand the content. This phone needs to be 3.00:1 with the orange around it so that it is recognizable. The circle it self is irrelevant to the purpose of the icon so it does not have contrast requirements.

In order to understand the graph below the user needs to discern the lines and shapes. Because of that the lines and shapes need to meet 3.00:1 with the white background. In this case the green and light blue lines do not meet this contrast requirement.