Graphical objects that describe important content must meet a 3:1 color contrast ratio; except flags, real-life imagery, branding, reference screencaps, and heatmaps.

WCAG 2 criterion

1.4.11 Non-text Contrast (Level AA)

Tools and requirements

• Color Contrast Analyzer tool

Test procedure

Note: This is a highly complex criterion. Please read through the official documentation for full details. https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

When testing color contrast, evaluate graphical objects for 3:1 contrast. Graphical objects that get tested under this guideline include icons (like social media icons, or icons used to describe an interactive element) and charts (like line charts and pie charts).

Icons must have a 3:1 contrast against the background of the icon.

For line charts, all lines (including the graph lines marking the gradations) must meet a 3:1 contrast ratio.

For pie charts, all pie slices must have a 3:1 contrast ratio (if there is no supplemental information like percentages provided alongside the labels) against whatever color surrounds it (regardless of if the adjacent color is another pie slice or the background color of the chart).

Flags, real-life images, branding, screencaps, and heatmaps are all excluded from this test.

AI Prompt