Detector Docs

English

Español

English

Español

Appearance

Non-text Contrast — Focus State ​

This check finds interactive graphical elements that do not adequately communicate that they have keyboard focus — in particular, when the only sign of focus is a colour change that is too faint to notice.

It applies to icons, custom buttons, interactive vector graphics, and graphical indicators such as carousel arrows or visual toggles.

What the tool checks ​

Two things:

  • The focus state must not depend on colour alone.
  • If there is a colour change, it must reach at least 3:1 against the adjacent background.

Why it matters ​

Users with low vision or colour blindness may not perceive a faint colour shift at all. Without a perceptible focus indicator, keyboard navigation becomes guesswork: the user loses track of which element is currently active.

How the check behaves ​

1. It finds the interactive graphical controls. Non-text controls are located both by visual analysis with an AI model — icons, vector graphics, custom buttons — and by scanning the page, including decorative pseudo-elements.

2. It records how each control looks unfocused. The relevant colours are noted: the fill and stroke of vector graphics, the text colour, and the background colour.

3. It applies keyboard focus and captures the same properties again.

4. It compares the two states, looking for a colour change in this order:

  1. the fill or stroke of vector graphics inside the control
  2. the fill, stroke or colour of the control itself
  3. the background colour of the control

External indicators such as an outline, a border or a shadow ring are not considered here. Those are covered by How Focus Indicator Contrast Is Evaluated.

5. It works out the adjacent background. The focused background colour of the control is used. If that is transparent, the tool looks up through the containing elements for the first solid colour. If none is found, it assumes white.

6. It calculates the contrast between the focused icon colour and that background. Below 3:1 is reported.

When it reports an issue ​

All of the following are true:

  • The element is visible, keyboard focusable and non-text.
  • It changes colour when it receives focus.
  • There is no other visual indicator that is not based on colour.
  • The contrast between the focused colour and the background is below 3:1.

When it stays quiet ​

  • The contrast is 3:1 or higher.
  • There is an indicator not based on colour — an outline, a visible border, and so on.
  • The element is disabled.
  • The element cannot be reached by keyboard.
  • There is no colour change between states.
  • A reliable background cannot be determined, leaving the contrast inconclusive.

What the report says ​

Title: Focused non-text element does not have sufficient contrast against its background

Description: The [colour element name] of [element name] in its focused state ([#hex-focus]) does not have sufficient contrast against the adjacent background ([#hex-background]). The contrast ratio is X.XX, which does not meet the minimum 3:1 ratio required.

Expected result: Non-text elements must have a focus indicator that is not based solely on color, or the color used must meet a minimum contrast ratio of 3:1 against the adjacent background.

WCAG checkpoint: 1.4.11 — Non-text Contrast

Issue type: Color contrast

Steps to reproduce, as they appear in the report:

  1. Using any desktop browser, open [URL]
  2. Press Tab to navigate to the [element name] [element type]
  3. Observe the visual change when the element receives focus
  4. Measure the contrast ratio between the focused element and the background

How to verify it by hand ​

  1. Open the page in any desktop browser.
  2. Navigate with the Tab key.
  3. Find the interactive graphical controls.
  4. Watch what changes when each one receives focus.
  5. Check whether there is an additional indicator beyond colour, and whether the colour change itself reaches 3:1.

Known limitations ​

  • The AI analysis can miss complex or dynamic elements.
  • External indicators are not evaluated here — outlines and borders belong to a different check.
  • Dynamic or gradient backgrounds reduce accuracy.
  • Transparency can produce inconclusive results, in which case the case is skipped rather than reported.

WCAG reference ​

Success Criterion 1.4.11 Non-text Contrast (Level AA)