Design Nomenclature / Systems & Spec

Non-text contrast

Also called SC 1.4.11, UI component contrast, graphical object contrast

WCAG 2.1 SC 1.4.11, Level AA: user interface components, their states, and the parts of graphics needed to understand content must reach 3:1 against adjacent colour. Input borders, icons, chart keys, focus and selection states — everything a 4.5:1 text audit walks straight past.

Two rows of user interface components on white — an input field with a dropdown chevron, and a checkbox — drawn as borders rather than text, because borders are what SC 1.4.11 is about. #949494 at 3.03:1 meets the 3:1 non-text minimum, and on the same row meets AA large while failing AA normal, AAA normal and AAA large. #B0B0B0 at 2.17:1, a common default border, fails all five including non-text. Neither row would be flagged by a text-only contrast check, because neither row is text.

In practice

Routinely missed. Pale input borders and grey-on-grey icons satisfy nothing, and “we checked contrast” almost always means text only.

Not to be confused with

How this term connects

Contrast ratioFocus indicatorLevel AATarget sizeNon-text contrast
Related Confused with