• Success Criterion 1.4.1
  • Conformance level A

Editable Fields Identified Only by a Color-Coded Legend

1.4.1 — Use of Color

Scenario

Setting

A video streaming service's show detail page

What’s wrong

"Fields in blue are editable" style legends where the distinction exists only chromatically.

Example 

<p>Fields in blue are editable.</p>
<label style="color:#2563eb">Show Title</label>
<label style="color:#6b7280">Show ID</label>

Why it matters

A content editor updating a show's metadata can't tell which fields they're allowed to change without testing each one.

How to test

View a color legend (e.g., 'blue fields are editable') in grayscale: if the distinction vanishes, it fails.

How to fix

Replace or supplement the color legend with a text badge or lock icon on each field.

<label style="color:#2563eb">Show Title <span class="badge">Editable</span></label>
<label style="color:#6b7280">Show ID <span class="badge">Locked</span></label>

Outcome

The editor updates the show title on the first click, without wasting time testing which fields respond.

Who is affected

Colorblind users who can't reliably separate the blue editable labels from the gray locked ones.

Learn more

Related scenarios