# 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

```ts
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.

More in [Contrast](/react/utils/contrast).

## Data attributes

<DataAttributesTable />