• 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 

.listing-link:focus {
  color: #4a4a4a;
}

Why it matters

The focused listing link shifts by a shade of grey that's nearly impossible to notice against the surrounding text.

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 subtle color shift alone rarely meets the visibility bar; add a shape-based cue like an outline.

.listing-link:focus-visible {
  color: #1a1a1a;
  outline: 2px solid #d97706;
  outline-offset: 2px;
}

Outcome

A house hunter tabbing through listings sees an unmistakable highlighted border on the current one.

Who is affected

Keyboard users, especially those with low vision, effectively see no focus indicator at all while browsing listings.

Learn more

Related scenarios