• Success Criterion 2.4.7
  • Conformance level AA

Focus Indicator That Disappears in Windows High Contrast Mode

2.4.7 — Focus Visible

Scenario

Setting

A community forum's discussion thread

What’s wrong

Indicator removed on Windows High Contrast / forced-colors mode via outline: none + box-shadow trick (box-shadow stripped by forced colors).

Example 

.reply-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.5);
}

Why it matters

In Windows High Contrast Mode, box-shadow is stripped entirely, and with outline already removed, the Reply button shows no focus indicator at all.

How to test

Enable Windows High Contrast / forced-colors mode and Tab through the page: if outline:none plus a box-shadow trick was used for the indicator, forced-colors mode strips the box-shadow too, leaving nothing visible.

How to fix

forced-colors mode overrides most custom colors and shadows but respects outline, so never rely on box-shadow alone for focus.

.reply-btn:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.5);
}

Outcome

A forum member in high contrast mode still sees a solid outline around the Reply button.

Who is affected

Users with low vision who rely on forced-colors or high-contrast mode lose focus visibility completely on affected controls.

Learn more

Related scenarios