Accessibility

You do not need to add anything.

Every color axis is a real <input type="range">, hidden visually, so keyboard handling and screen-reader support come from the browser rather than a reimplementation of it.

What you get

Arrows step. Shift+arrow and Page Up/Down step by ten. Home and End jump.
The mode switcher is a tablist with a roving tab stop.
Values are announced as text: "Hue 210 degrees", not a bare number.
The popover traps focus, closes on Escape, and returns focus to the trigger.
Swatches are buttons with accessible names.
prefers-reduced-motion and forced-colors mode are both handled.

Helpers for your own UI

import { readableTextColor, contrastRatio } from "chroma-panel";
 
readableTextColor("#001f3f"); // '#ffffff'
contrastRatio("#fff", "#001f3f"); // WCAG 2.1 ratio

readableTextColor uses APCA rather than plain luminance. It picks white over mid-blues, where the older method wrongly picks black.

Data attributes

Attribute	Description
data-cp-channel	The channel a slider edits.
data-cp-collapsed	Present while the panel is collapsed.
data-cp-disabled	Present when the panel is disabled.
data-cp-dragging	Present while a pointer drag is in progress.
data-cp-fade	Which edge of a scroll port has more content.
data-cp-large	Present on the larger pointer target sizes.
data-cp-light	Present when the current colour is light.
data-cp-modes	How many mode tabs are showing.
data-cp-open	Present while the popover is open.
data-cp-size	The panel size: `default` or `expanded`.
data-cp-theme	The resolved theme: `dark` or `light`.
data-cp-variant	The swatch variant.