Non-text Contrast - Success Criterion 1.4.11 (Level AA)

Question

Is there sufficient contrast between adjacent colors for active controls, graphs, charts, form fields, and other informational non-text elements in your site or application?

Why is this important?

This success criterion builds upon 1.4.3 Contrast which requires proper contrast for text and images of text.
Non-text contrast requires visual information on user interface controls (e.g. buttons), form fields, and meaningful graphics to meet a 3:1 contrast ratio. This benefits people with moderately low vision who find it difficult to distinguish between colors. This contrast requirement for non-text elements enables users to perceive interface controls and interpret data on charts and graphs that may be missed due to low contrast issues.

Whom does it benefit?

Example 1

As a person with low vision studying economics,
I want to be able to distinguish between each slice of a multicolored pie chart
so that I can interpret the data.

Example 2

As a person who gets eye fatigue while watching videos on my computer,
I want sufficient contrast of the video player controls
so that I can easily find the volume, stop, and play buttons.

What should you do?

Ensure that all active controls, form fields, graphs, charts, and other informational non-text elements have a minimum 3:1 contrast ratio with the adjacent colors.

How do you do it?

Using contrast analyzers, test adjacent colors for non-text informational elements such as charts, graphs, form fields, and active controls throughout the site or application to ensure a contrast ratio of at least 3:1. When insufficient contrast issues are found, adjust colors to meet a minimum of 3:1 ratio. In some instances it may be preferable to separate adjacent colors with white space or borders to meet the 3:1 ratio.

Note: This does not apply to logos, flags, photography, sensory screenshot to demonstrate how something appears, diagrams of medical information that use the colors found in biology, or color gradients that represent a measurement, such as heat maps.