• Success Criterion 1.4.11
  • Conformance level AA

Map or Drawing Tool Controls With Too-Low Contrast

1.4.11 — Non-text Contrast

Scenario

Setting

A recipe site's ingredient list

What’s wrong

Map controls / drawing tools where required visual info fails ratio.

Example 

.map-controls button { background: #ffffff; border: 1px solid #f2f2f2; color: #cccccc; }

Why it matters

A cook trying to zoom the grocery-store locator map can't distinguish the zoom buttons' faint icons from their white background.

How to test

Measure map controls and drawing-tool icons against their background: 3:1 minimum where they convey required information.

How to fix

Map and drawing-tool controls carry required information about map state, so their icons and boundaries need real contrast.

.map-controls button { background: #ffffff; border: 1px solid #757575; color: #333333; }

Outcome

A cook finds and taps the zoom-in control on the store map without squinting to locate a faint icon.

Who is affected

Low-vision users can't locate or operate map controls whose icons and borders both fail the 3:1 minimum.

Learn more

Related scenarios