• 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

Open an online spreadsheet's toolbar and this is what you'll see: toggle switches whose on/off states differ by colors <3:1 from each other/adjacent colors.

Why it matters

Low-vision and color-blind people who need to perceive controls and meaningful graphics. On an online spreadsheet's toolbar, that means they can't perceive the control's boundary or state.

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

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

Outcome

With the fix in place on an online spreadsheet's toolbar, they tell the information apart without relying on color, specifically for the “Toggle Switch States Too Similar in Color to Tell Apart” issue on an online spreadsheet's toolbar.

Who is affected

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

Learn more

Related scenarios