• Success Criterion 2.4.7
  • Conformance level AA

Focus Indicator That’s Just a Subtle, Hard-to-See Color Shift

2.4.7 — Focus Visible

Scenario

Setting

A real-estate marketplace's listing page

What’s wrong

Indicator relies on subtle color change alone effectively invisible (crosses into 1.4.11 for ratio, base "no visible indicator" here).

Example

A real-estate marketplace's listing page runs into this exact issue: indicator relies on subtle color change alone effectively invisible (crosses into 1.4.11 for ratio, base "no visible indicator" here).

Why it matters

Sighted keyboard users and low-vision users who must see where focus is. Here, on a real-estate marketplace's listing page, the result is they can't complete the task using a keyboard alone.

How to test

Tab to a control and compare the focus state to an unfocused one: if the only difference is a subtle color shift that's hard to perceive, check its contrast (also relevant to 1.4.11), but first confirm a visible change actually happens at all.

How to fix

A clearly visible focus indicator must appear, in full, on every interactive element when it receives keyboard focus.

Outcome

After the fix, the same visitor to a real-estate marketplace's listing page can now reach and operate the control without a mouse.

Who is affected

Sighted keyboard users and low-vision users who must see where focus is.

Learn more

Related scenarios