• 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 

.consent-checkbox { border: 1px solid #d9d9d9; background: #fff; }

Why it matters

A customer trying to find the 'I agree to the transfer terms' checkbox before submitting can barely locate its unchecked outline against the white form.

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

Darken the unchecked state's border so its boundary reaches at least 3:1 against the surrounding background.

.consent-checkbox { border: 1px solid #595959; background: #fff; }

Outcome

A customer locates the consent checkbox immediately and submits the transfer on the first try.

Who is affected

Low-vision customers can miss an unchecked required checkbox entirely, blocking them from completing the transfer.

Learn more

Related scenarios