• Success Criterion 1.4.11
  • Conformance level AA

Selected-State Marker Too Faint to Notice

1.4.11 — Non-text Contrast

Scenario

Setting

A crowdfunding platform's campaign page

What’s wrong

Selected-state indication (tab underline, active card border) <3:1.

Example 

.reward-tier.selected { border: 1px solid #eeeeee; } /* same as the unselected card's border */

Why it matters

A backer who taps a reward tier can't visually confirm which one they selected, since the selected border barely differs from the default.

How to test

Measure the visual marker for a selected state (tab underline, active card border) against its background: 3:1 minimum.

How to fix

Make the selected state's border both thicker and a distinct, high-contrast color from the resting state.

.reward-tier { border: 1px solid #eeeeee; }
.reward-tier.selected { border: 2px solid #1565c0; }

Outcome

A backer taps the $50 tier and can immediately confirm it's the one now highlighted.

Who is affected

Low-vision backers may back the wrong reward tier because the selected state gives no clear visual confirmation.

Learn more

Related scenarios