Success Criterion 1.4.11
Conformance level AA
W3C reference F78

Focus Outline Removed With No Replacement Indicator

1.4.11 — Non-text Contrast

Scenario

Setting

A food-delivery app's order-tracking screen

What’s wrong

CSS removes or hides the focus outline (outline:none / border removal) with no replacement — keyboard users can't see where they are on the page.

Example

border: 1px solid #dcdcdc; /* icon outline, ~1.2:1 against white */

Why it matters

Low-vision and color-blind people who need to perceive controls and meaningful graphics.

How to test

Tab to a control after CSS resets its outline: measure the replacement focus indicator's contrast — if none exists, it fails.

How to fix

If outlines/borders are restyled, supply a replacement focus indicator at least as visible. border: 1px solid #767676; /* ~4.5:1 */ Icons, borders, and other non-text UI elements need at least 3:1 contrast to stay visible.

Outcome

On a food-delivery app's order-tracking screen, this barrier is gone for low-vision and color-blind people who need to perceive controls and meaningful graphics — they get the same result as anyone else here.

Who is affected