• Success Criterion 1.4.11
  • Conformance level AA

Icon-Only Button Glyph With Contrast Too Low to See

1.4.11 — Non-text Contrast

Scenario

Setting

A photo-sharing app's upload screen

What’s wrong

Icon-only buttons (hamburger, search, close ×) with glyph <3:1.

Example 

.close-btn svg { fill: #e8e8e8; }
.upload-panel { background: #f5f5f5; }

Why it matters

A user trying to cancel a photo upload can barely make out the close icon against the panel's near-white background.

How to test

Measure icon-only button glyphs (hamburger, search, close ×) against their background: 3:1 minimum.

How to fix

Darken icon-only glyphs so they clear 3:1 against their background, since there's no text label to fall back on.

.close-btn svg { fill: #595959; }
.upload-panel { background: #f5f5f5; }

Outcome

A user spots the close icon right away and cancels the upload without hunting for a barely visible x.

Who is affected

Low-vision users scanning for the close button by shape alone may miss it entirely against the pale background.

Learn more

Related scenarios