• Success Criterion 1.4.11
  • Conformance level AA

Checkbox or Radio Outline Too Faint When Unchecked

1.4.11 — Non-text Contrast

Scenario

Setting

A bank's mobile money-transfer screen

What’s wrong

Checkbox/radio outlines below 3:1 (unchecked state invisible).

Example

A bank's mobile money-transfer screen shows the problem clearly: checkbox/radio outlines below 3:1 (unchecked state invisible).

Why it matters

Low-vision and color-blind people who need to perceive controls and meaningful graphics. On a bank's mobile money-transfer screen, this barrier means they can't perceive part of the content because of how it's displayed.

How to test

Measure a checkbox/radio's unchecked-state outline against its background: it needs at least 3:1, or the control effectively becomes invisible.

How to fix

The visual element (border, icon, indicator, state marker) must have at least 3:1 contrast against adjacent colors in every state.

Outcome

Corrected, a bank's mobile money-transfer screen now lets a visitor see the control's boundary and current state, specifically for the “Checkbox or Radio Outline Too Faint When Unchecked” issue on a bank's mobile money-transfer screen.

Who is affected

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

Learn more

Related scenarios