Short answer
The visual information someone needs to find a control and tell its state — an input's boundary if nothing else shows where it is, a checkbox's box and tick, a toggle's position, a meaningful icon, the parts of a chart needed to read it — each against the colours right next to it. Decorative lines, disabled controls, unstyled browser defaults and graphics whose information is also given in text are not covered.
Criterion 1.4.11, added in WCAG 2.1 and kept in 2.2, applies 3:1 to two things: visual information required to identify user-interface components and their states, and parts of graphics required to understand content. The word 'required' does most of the work. A text input with a visible label and a filled grey background is identifiable by its fill; its border can be faint. The same input on a white page with no fill, identified only by a pale outline, depends on that outline, which then needs 3:1. A button with a clear text label does not need its outline or fill to reach 3:1 against the page — the text identifies it — although many teams choose to anyway. The W3C's Understanding document works through these cases.
Contrast is measured against the colours immediately adjacent to the part that matters. For a checkbox's border that means the page behind it; for its tick, the box's fill; for an icon inside a button, the button's fill, not the page. Where a component uses several colours, those that do not help identify it can be ignored. Gradients are measured at the part that is needed: the Understanding document suggests testing the central colour of the area that conveys the information. Ratios are thresholds and are not rounded — 2.999:1 is a fail. The table shows the practical consequence for input borders: on white, greys lighter than about #949494 fall below 3:1, and on a light-grey #F5F5F5 page the threshold moves darker still.
A state indicator that is the only way to tell whether a control is checked, selected, pressed or expanded needs 3:1 against its adjacent colours. Hover is treated differently: the Understanding document regards it as supplementary, not needing a particular contrast unless it is the only way the control is identified. Focus indicators are covered as visual information identifying a state, so they need 3:1 against what surrounds them. What 1.4.11 does not measure is the difference between a control's focused and unfocused appearance; if focus is shown only by a change of fill colour, this criterion sets no minimum for that change. That gap is what the separate focus-appearance criterion addresses, covered on the focus-visibility page.
Inactive (disabled) components are exempt. So are components whose appearance is determined by the browser and not modified by the author — an unstyled native checkbox, for instance, even if the browser's default has low contrast. Purely decorative graphics are out of scope, as are logos. Graphics whose information is available another way need not meet 3:1 in every part: a pie chart whose segments carry visible labels and values can use segment colours that are close to each other, because the labels, not the colours, carry the data. Photographs and representations of real things where colour is intrinsic — a heat map of a real image, a photo of a product — are also treated as essential presentation.
| Border grey | On #FFFFFF | On #F5F5F5 |
|---|---|---|
| #E0E0E0 | 1.32:1 | 1.21:1 |
| #C4C4C4 | 1.74:1 | 1.59:1 |
| #ADADAD | 2.24:1 | 2.05:1 |
| #949494 | 3.03:1 ✓ | 2.78:1 |
| #8A8A8A | 3.45:1 ✓ | 3.16:1 ✓ |
| #767676 | 4.54:1 ✓ | 4.16:1 ✓ |
Why: The field is identified only by a very light outline.
Fix: Darken the outline to 3:1 or give the field a contrasting fill.
Why: The tick or fill that shows the state is under 3:1 against the box.
Fix: Increase the tick's contrast against the box fill.
Why: Icon contrast was checked against the page, not the toolbar.
Fix: Check icons against the colour directly behind them.
Each statement is labelled by kind — established fact, a standard’s requirement, observed market data, a convention, or Colourwise’s own interpretation or analysis — with the strength of the evidence behind it.
StandardStrong evidence
WCAG 2.2 success criterion 1.4.11 requires a contrast ratio of at least 3:1 against adjacent colours for visual information required to identify user-interface components and states, and for parts of graphics required to understand content, except for inactive components and components whose appearance is determined by the user agent.
Source: Web Content Accessibility Guidelines (WCAG) 2.2; Understanding Success Criterion 1.4.11: Non-text Contrast (WCAG 2.2)
StandardStrong evidence
The W3C's Understanding document states that computed contrast values are not rounded for 1.4.11, so 2.999:1 does not meet 3:1, and that for gradients the colour at the centre of the area needed for understanding can be tested.
Source: Understanding Success Criterion 1.4.11: Non-text Contrast (WCAG 2.2)
StandardStrong evidence
The Understanding document explains that 1.4.11 does not define a required contrast between a control's focused and unfocused states when focus is shown only by a change of colour, and that hover styling generally does not need to meet it.
Source: Understanding Success Criterion 1.4.11: Non-text Contrast (WCAG 2.2)
Colourwise analysisStrong evidence
On a white page, input-border greys lighter than about #949494 have less than 3:1 contrast, and on a #F5F5F5 page a darker grey is needed.
Based on: Computed by Colourwise with the WCAG 2.2 contrast formula; see the table.
Source: Web Content Accessibility Guidelines (WCAG) 2.2; Understanding Success Criterion 1.4.3: Contrast (Minimum) (WCAG 2.2)
Reviewed 29 September 2026. Colourwise summarises its sources in its own words and does not reproduce standards text or proprietary colour data. Spotted an error? Tell us.