Definition: Non-text contrast is the contrast of everything that is not text but has to be seen: input borders, icons, checkmarks, focus indicators and the lines in a chart. Under WCAG 1.4.11 (Level AA), these need at least 3:1 against adjacent colours [1].
German: Nicht-Text-Kontrast · Last reviewed: 27 September 2026
What it covers
The criterion arrived with WCAG 2.1 and closed a gap: text had long been covered by WCAG 1.4.3, but an input field with a light grey border on white was simply invisible to many partially sighted people. They could not see where to click, or whether a checkbox was ticked.
Two groups of things are covered [1][2]:
- UI components and their states: whatever you need to see to identify a control – a field's border, a toggle's shape, the checkmark, the marker on the active tab, the focus ring.
- Graphical objects: the parts of a graphic needed to understand it, such as the lines of a chart or a warning icon with no text beside it.
What is exempt
- Inactive components that cannot be used.
- Components whose appearance is left entirely to the browser, because the page has not changed it.
- Graphics where a particular presentation is essential, such as a photo, a flag or a heat map.
- Buttons with text whose background is not needed to identify them: there, text contrast is what counts.
Examples
- An input with a
#cccborder on white reaches about 1.6:1 – too little. A#767676border reaches about 4.5:1. - A chart with a light blue and a light green line: each line needs 3:1 against the background. Labelling the lines directly helps too.
- A pale pink focus ring on white is barely visible.
In code
/* Too faint: about 1.6:1 */
input { border: 1px solid #ccc; }/* Better: about 4.5:1, plus a focus ring */
input { border: 1px solid #767676; }
input:focus-visible {
outline: 3px solid #1a4fd6;
outline-offset: 2px;
}How to test it
Go through each control and ask: what do I need to see to recognise it and understand its state? Measure exactly that colour against its surroundings. Check hover, focus and selected states as well.
How Reviseberg handles it
WCAG 1.4.11 can only partly be tested automatically: which pixels identify a control is often a judgement call. Reviseberg's keyboard agent measures whether a focused element gets any visible indicator at all (keyboard:focus-visible). The contrast of borders, icons and charts is for a person to judge, so Reviseberg treats the criterion as only partly testable by automation and never reports it as passed on the strength of a measurement alone.
Related terms
Contrast ratio · Focus indicator · Form label · Screen magnifier