The parts of your interface that need 3:1, and the parts that need nothing

The number is 3:1, and it is not the text number

Body text needs 4.5:1. Almost everything else that carries meaning needs 3:1. WCAG 1.4.11 Non-text Contrast, at AA, is the criterion, and it covers two families of thing.

• —User interface components. The visual information needed to identify a control and its current state. The border of an empty input, an unchecked checkbox, the off position of a toggle, a focus ring.
• —Graphical objects. The parts of a graphic you need in order to understand it. A line on a chart, an icon carrying meaning on its own, the filled portion of a progress bar.

A common grey border sits right on the line. This one is the kind of value that ends up in a component library because it looks fine on a designer's monitor.

Nowhere near 3:1. Every input on the product is failing, and no contrast report aimed at text will ever mention it.

What the criterion deliberately leaves alone

This is the half nobody publishes, and it is the half that saves work. The criterion carves out several things, and they are in the normative text rather than being anyone's interpretation.

The decorative exemption has an edge that matters. A rule between two paragraphs is decoration. The moment a line is the only thing telling you where one control ends and the next begins, it is carrying information and it is covered.

Focus indicators have a second rule

A focus ring is a component state, so 1.4.11 applies at 3:1. WCAG 2.2 added a second criterion aimed specifically at focus: 2.4.13 Focus Appearance, at AAA.

2.4.13 goes further than contrast. It also asks that the indicator be at least as large as a set area, roughly the perimeter of the component at a minimum thickness, which rules out the popular one-pixel outline that technically contrasts and practically vanishes.

Two other 2.2 criteria are about focus and are often confused with these, so they are worth naming: 2.4.11 and 2.4.12 Focus Not Obscured are about whether a sticky header covers the focused element. They are not contrast rules.

Checking a part of an interface

The awkward thing about 1.4.11 is that the answer depends on what the element is, and no generic color checker asks you that. A grey at 2.4:1 is a failing input border, an acceptable decorative divider, and a perfectly correct disabled button, all at the same value.

Where this usually bites

• —Input and select borders in a light theme, which are almost always too pale.
• —Unchecked checkboxes and radios, where the only thing identifying the control is the outline.
• —The off state of a toggle, which people style as a soft grey track.
• —Placeholder text, which is text and therefore needs 4.5:1, not 3:1. This one is the reverse mistake.
• —Chart series in a light palette, especially the third and fourth series where the palette has run out of strong colors.
• —Focus rings inherited from a framework and never checked against the surfaces they land on.

The last one is the sneakiest, because a focus ring is usually tested once, on white, and then used on cards, panels, tinted rows and dark mode, where its contrast against the thing behind it is a different number entirely.