• Success Criterion 1.4.11
  • Conformance level AA

Toggle Switch States Too Similar in Color to Tell Apart

1.4.11 — Non-text Contrast

Scenario

Setting

An online spreadsheet's toolbar

What’s wrong

Toggle switches whose on/off states differ by colors <3:1 from each other/adjacent colors.

Example 

.toggle.on { background: #b3d4ff; }
.toggle.off { background: #d6e4ff; } /* two pale blues, nearly indistinguishable */

Why it matters

A user trying to tell whether 'Show gridlines' is on or off from the toolbar can't distinguish two near-identical shades of blue.

How to test

Measure a toggle switch's on-state color against its off-state color (and against the adjacent background) with a contrast checker: both need at least 3:1 distinction.

How to fix

Give on and off states colors that differ from each other by at least 3:1, not just two similar pastel tones.

.toggle.on { background: #0b5fff; }
.toggle.off { background: #757575; }

Outcome

A user glances at the gridlines toggle and immediately tells it's switched on.

Who is affected

Users with low vision or color vision deficiencies can't reliably tell a toggle's current state from color alone.

Learn more

Related scenarios