• Success Criterion 1.4.11
  • Conformance level AA

Dropdown Caret or Control Icon Invisible Against Its Background

1.4.11 — Non-text Contrast

Scenario

Setting

A coworking-space booking app

What’s wrong

Placeholder-styled dropdown carets and control affordances invisible against fills.

Example 

.date-select { background: #f0f0f0; }
.date-select .caret { fill: #e5e5e5; } /* caret nearly matches the select's own fill */

Why it matters

A member trying to change the booking date can't tell the date field is even a dropdown, since its caret icon nearly disappears.

How to test

Measure dropdown carets, input affordance icons, and similar control cues against their fill color: below 3:1 makes them invisible.

How to fix

Style affordance icons like dropdown carets to hold 3:1 against the control's own fill, not just the page background.

.date-select { background: #f0f0f0; }
.date-select .caret { fill: #595959; }

Outcome

A member sees the caret and immediately recognizes the date field as a dropdown to open.

Who is affected

Low-vision users miss the visual cue that a control is interactive when its caret blends into the field's own background.

Learn more

Related scenarios