Non-text contrast

Text contrast has a rule everyone knows. Everything else on the screen got one in WCAG 2.1, and it is 3:1. Success criterion 1.4.11 covers two families: the visual information needed to identify a user interface component and its state, and the parts of a graphic a reader needs in order to understand it. A field whose only edge is a hairline the same value as the page fails it. So does an icon-only button, a checked state told by a fill too pale to find, a chart line no one can separate from the plot area, and a focus indicator drawn in a grey that looked tasteful on a designer’s monitor.

The two thresholds are worth keeping straight. Contrast ratio at 4.5:1 is the text rule, 3:1 covers large text and everything non-text, and the comparison is always against the adjacent colour, which for a border means the background on both sides of it. Only the parts that carry the identification have to reach it: the edge of a button, not its whole fill; the pen stroke of a data series, not its label’s shadow; the ring around a focused control, not the halo behind it. WCAG 2.2 adds a separate criterion on focus appearance with its own size and change requirements, so a focus indicator has two rules to satisfy rather than one.

The exemptions are narrow and frequently overclaimed. Pure decoration is out, as is anything whose appearance the browser determines and the author has not styled, and so are inactive components: a disabled control is exempt, which is precisely why disabled is a state to hand out sparingly rather than a licence to grey things into invisibility. Logotypes are exempt as well. None of that covers a placeholder, a low-contrast divider carrying grouping, or an icon whose meaning is the only label present.

This is the sibling criterion to use of color: that one says a difference must be told twice, and this one says the telling has to be visible at all. A redundant mark drawn at 1.5:1 satisfies neither. Two habits catch most of it. Measure the boundary colours in a design system once, rather than per screen, so borders and icon strokes are picked from values that already pass. And check the states as well as the resting look, since the checked, selected, and focused versions of a control are exactly the information this criterion is about.