Non-text UI components and graphical objects need a contrast ratio of at least 3:1 against adjacent colours.

This covers the visual parts of interactive elements and any graphic needed to understand the content. It was added in WCAG 2.1 and sits at Level AA.

What this actually covers

This is broader than most designers expect. It's not just icons.

Icons that convey meaning - navigation, status indicators, action icons, icon-only buttons. If removing the icon would lose information, it needs 3:1.

Input field borders. The outline that tells users where a text input is. If your input is only distinguishable from the background by its border, that border needs 3:1. Light grey borders (#CCCCCC) on white (#FFFFFF) give you 1.6:1 - well below the threshold.

Checkboxes and radio buttons. The visual boundary that identifies the control, in both checked and unchecked states.

Toggle switches. The track, the thumb, and any state indicators. Users need to identify the component and tell which state it's in.

Focus indicators. The outline or highlight showing which element has keyboard focus.

Button boundaries. If a button is distinguished from the background by its border or fill colour (not just its text label), that visual boundary needs 3:1.

Charts and data visualisations. Individual bars, lines, segments, and data points that users need to distinguish.

Custom controls. Sliders, steppers, progress bars, tabs - any component where the visual design is what tells users it's interactive.

What's exempt

Decorative graphics that don't convey information. Inactive/disabled controls. Browser or OS default controls you haven't styled. Logos and brand marks.

Text is covered separately by 1.4.3 and 1.4.6, not by this criterion.

Why 3:1 and not 4.5:1

Non-text elements are usually simpler shapes than letterforms - a border, a filled region, an icon. Simpler shapes are easier to perceive at lower contrast. 3:1 is the ISO 9241-3 baseline for normal vision. Text contrast adds a 1.5x multiplier for moderate vision loss, but non-text elements don't need that extra factor because the shapes are less detailed.

3:1 is still a floor, not a target. If you can exceed it, your controls will be easier to spot for everyone.

Things to watch for

State changes. A checkbox that passes in its unchecked state might break in its checked state. Test every interactive state: default, hover, active, focus, selected, error.

Colour-only state indicators. A toggle that changes from grey to green doesn't help colour-blind users if both states have similar luminance against the background. The difference needs to work through brightness, not just hue.

Subtle input fields. Borderless inputs or inputs with very light borders are a common failure. If the border is the only visual cue that an input exists, it has to pass 3:1. A lot of "modern" form designs break here.

Icon colour on hover/active states. Icons that change colour on interaction still need 3:1 in every state. A hover state that lightens an icon on a light background can drop below the threshold.

In Perception

Perception detects icon elements automatically and tests their contrast alongside text in every scan. Most contrast tools skip non-text elements entirely - this is one of the things Perception was built to catch.

For complex backgrounds, Perception uses dominant colour detection to test against what users actually see.

Pro users can set a maximum icon size (in pixels) to filter out large decorative or illustrative graphics that aren't covered by this criterion, reducing noise in design system work.

Related

• 1.4.3 Contrast (Minimum) - 4.5:1 for text at Level AA.

• 1.4.6 Contrast (Enhanced) - 7:1 for text at Level AAA.

• Text size - Why font size affects readability and when Perception flags small text.