WCAG 1.4.11 Non-text contrast

What WCAG 1.4.11 asks for

The rule has two halves. First, controls: anything a person needs to see to know a control is there, or to know its current state, must reach 3:1 against what touches it. Second, graphics: any part of an image or chart that is needed to understand the content must also reach 3:1.

The word "needed" does a lot of work. A text field drawn only as a pale rectangle on a white page relies on that edge, so the edge must pass. A button that shows a clear word such as Search does not depend on its background shape, because the word already tells you it is there; the word itself then falls under the text contrast rules.

Hover effects are not covered. A slightly darker shade when the pointer rests on a button is a nice touch, not a requirement. The states that do count are the ones that tell a person something: focused, checked, selected, pressed, expanded, on or off.

Which parts need 3:1

A keyboard focus outline is the ring or highlight that shows which item will react when you press Enter. Its visibility is required by 2.4.7 Focus visible; this rule adds that the visible outline must be strong enough to notice.

What does not need 3:1

• Inactive controls. A disabled button or field can be pale.
• Controls the browser draws. A plain checkbox or select menu that you did not restyle is the browser maker's responsibility. Once you change its colors, it is yours.
• Essential appearance. Logos, flags, photos, screenshots and heat maps where the real colors are the information.
• Graphics with the same information in text. If every value in a chart is also printed as a label or in a table next to it, the faint gridlines do not have to pass.
• Decoration. Background shapes, dividers that only look nice, and illustrations that add mood but no meaning.

Who gains from stronger control contrast

People with low vision often cannot find a form field whose border is a whisper of grey. They see a white page with labels floating on it and no place to type. Older users with reduced contrast sensitivity, people on a phone outside in the sun, and anyone with a worn laptop screen meet the same problem. Keyboard users who cannot see a weak focus outline lose track of where they are on the page, and color blind users miss chart lines that differ only in hue.

Testing WCAG non text contrast step by step

1. Open the page and list every control, icon only button, focus style and chart.
2. Press Tab through the page so you can see each focus outline and state in turn.
3. Use the eyedropper in the browser developer tools color picker, or copy colors from the CSS, to get the part color and the adjacent color.
4. Enter both into the color contrast checker and read the row for UI parts and graphics.
5. Tick, select and switch each control, then measure the checked and selected looks too.
6. For charts, test each line or slice against the background and against the slice next to it.

Automated tools rarely test this rule well, because they cannot tell which shapes carry meaning. Plan on doing it by hand.

Failures we find most, and their fixes

Pale outline Passing outline

#949494 is a handy number to remember: it is about the lightest grey that still reaches 3:1 on white, at 3.03:1. One step lighter, #959595, drops to 2.99:1.

Code: a form field before and after

input { border: 1px solid #dddddd; }
input:focus { outline: 2px solid #8ab4f8; }

input { border: 1px solid #767676; }
input:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }

The small offset leaves a gap of page color between the field and its outline, so the outline is measured against the white page alone and is easy to spot.

Neighbouring rules

• Text contrast (1.4.3): words on buttons and in fields need 4.5:1, dropping to 3:1 when the text is large.
• Color alone (1.4.1): a chart that separates series only by hue fails even if every color passes 3:1; add labels or patterns. See the use of color guide.
• Focus appearance (2.4.13, AAA): a WCAG 2.2 rule that sets a size and 3:1 change for focus indicators at the higher level.

For W3C's own examples, read the W3C explanation of non-text contrast. The WCAG checklist has this rule next to every other AA item.