How to build an accessible ColorPicker in React

The saturation/lightness area is a focusable role="slider" with arrow-key nudging and an aria-valuetext reporting the current hex; hue and alpha are native range inputs that inherit platform slider semantics and announcements.

When to use a ColorPicker

• Letting a user choose an arbitrary color via a visual saturation/lightness area plus hue control
• Brand or theme customization UIs where an exact color value (hex) is captured
• Forms that need an optional alpha channel alongside the color

When not to use it

• Choosing from a small fixed palette only — use a swatch RadioGroup instead
• A single accent toggle where a few preset chips suffice

Keyboard interactions

Role slider, verified at WCAG 2.2-AA.

• ArrowLeft
• ArrowRight
• ArrowUp
• ArrowDown

Common mistakes

Avoid: <ColorPicker /> with no presets for a brand palette of 4 fixed colors

Prefer: <RadioGroup> of color swatches

A free-form picker invites off-brand values when only a fixed set is allowed

Example

<ColorPicker defaultValue="#3b82f6" onValueChange={setColor} />

See the full ColorPicker reference →