WCAG 1.4.11 Non-text Contrast

What it asks

1.4.3 Contrast (Minimum) covers text. This rule covers two other groups of things, both at 3:1. The first is user interface components: the visual information needed to identify a control and its state. The border of a text field tells you it is a field. A tick in a checkbox tells you it is checked. A focus ring tells you where the keyboard is. Each of those has to contrast with what is next to it.

The second is graphical objects: the parts of a graphic needed to understand the content. The line in a line chart, the slices of a pie chart, the strokes of an icon that is the only sign of what a button does. Decorative parts of a graphic are not covered, only the parts that carry information.

The ratio is measured against adjacent colours, which usually means the background the control or graphic sits on. Two exceptions apply to components: inactive controls, and controls whose appearance the browser decides and the author has not changed. A third applies to graphics where a particular presentation is essential, such as a photograph or a chart of actual paint colours.

Not every control needs a visible boundary. A button that is identified by its text alone, with no border, passes as long as the text meets 1.4.3. What this rule asks is that if a boundary or indicator is what identifies the control or its state, that boundary meets 3:1.

Its official name is success criterion 1.4.11 Non-text Contrast, at Level AA. It was added in WCAG 2.2, under guideline 1.4 Distinguishable and the principle Perceivable. The W3C’s normative text says, in part:

“The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):”

From WCAG 2.2, W3C. Full explanation: Understanding 1.4.11 Non-text Contrast.

Who it helps

People with low vision, for whom a pale grey border on a white page is not there. They cannot see where a form field starts, whether a checkbox is ticked, or where the keyboard focus has gone.

People with colour vision deficiency, and everyone on a dim screen or in bright light, for whom a faint icon or a thin chart line disappears.

What passes and what fails

These pass

• A text field with a mid-grey border, #767676, on a white page, which is comfortably above 3:1.
• A focus ring in a dark blue on a white background.
• An icon-only button whose icon strokes are dark on a pale background.
• A line chart whose lines each contrast with the background at 3:1 and are also told apart by labels.
• A button with no border, identified by its text, which passes 1.4.3.

These fail

• A text field with a 1 pixel border in a very light grey, such as #dddddd, on white.
• A focus ring in a pale blue that barely differs from the page.
• An icon-only button in a pale tint on a white background, where the icon is the only sign of what it does.
• A custom checkbox whose checked state is shown by a tick too faint to see.
• Chart gridlines and axis marks in a grey too light to read, where the values depend on them.

How to test it by hand

1. List the controls on the page: fields, checkboxes, radio buttons, toggles, sliders, icon buttons and custom widgets. For each, find what identifies it: a border, a fill, an icon or its text.
2. Measure the colour of that identifying part against the colour next to it, usually the background. It needs 3:1.
3. Tab to each control and measure its focus indicator against the background it sits on. Click checkboxes and radio buttons and measure the checked state.
4. List the graphics that carry information: charts, icons without text, diagrams and status symbols. Measure the informative parts against their background.
5. Set aside inactive controls, controls the browser draws by default, and graphics whose exact presentation is essential.
6. Note each failure with the colours, the measured ratio and whether it is a control or a graphic, because the two are usually fixed by different people.

What automated testing can decide

What a machine can decide

Once it is known which edge identifies a control, the contrast is arithmetic, the same formula as text. A tool can read a control’s border, fill and outline colours, measure the identifying one against the colour next to it and compare with 3:1. The same goes for a focus indicator, a checked box or a selected tab, once that state is on screen.

What it cannot

Deciding which edge is the boundary is the hard part, and deciding whether a control needs one is harder: a text button with a plain label needs no boundary at all, and a tool that measured its faint border would be wrong to fail it. For graphics, which parts carry information and which are decoration is a question about what the graphic means.

How Dreven handles it

Dreven finds the form fields, custom controls, icons and chart parts on your pages whose edges or meaning may be too faint to see, and shows you each one with its colours, the page and a picture of it in each state.

A reviewer decides each result, and the report says how each one was decided.

No automated check makes a site conform. In Dreven, a person reviews the results and signs the report.

Related criteria

• 1.4.3 Contrast (Minimum) (Level AA). The 4.5:1 and 3:1 rules for text.
• 1.4.1 Use of Color (Level A). Colour must not be the only cue. Contrast asks whether a cue can be seen at all.
• 2.4.7 Focus Visible (Level AA). Focus must be visible. 1.4.11 says how much it must contrast.
• 2.4.13 Focus Appearance (Level AAA). The AAA rule on the size and strength of the focus indicator.

Questions people ask

All WCAG 2.2 criteria, in plain words