• Success Criterion 2.5.7
  • Conformance level AA

Color Picker That Requires Dragging in a Gradient Field

2.5.7 — Dragging Movements

Scenario

Setting

A recipe site's ingredient list

What’s wrong

Color pickers requiring drag in the gradient field.

Example 

tagColorCanvas.addEventListener('pointerdown', startColorDrag);
tagColorCanvas.addEventListener('pointermove', updateColorFromPosition);
// there is no hex or RGB text input anywhere on the page

Why it matters

A home cook trying to tag this recipe green for 'vegetarian' before saving it can't land on an exact shade without precisely dragging inside a tiny gradient swatch next to the ingredient list.

How to test

Try selecting a color via numeric input or click-to-select instead of dragging in the gradient field: if drag is required, it fails.

How to fix

Add a text input for hex or RGB values as a precise, drag-free alternative to the gradient field used for tagging.

<input type="text" id="hexInput" placeholder="#4CAF50" aria-label="Hex color code for recipe tag" onchange="setTagColorFromHex(this.value)">

Outcome

A home cook types a hex code and the recipe's color tag updates immediately next to its ingredient list.

Who is affected

People with tremor and low vision users who can't judge fine position inside a gradient field.

Learn more

Related scenarios