Forms

ColorPicker and ContrastBadge

Pick a color by area, hue, hex or presets, and check its WCAG contrast as you go.

Ant Design: ColorPicker

import { ColorPicker, ContrastBadge, contrastRatio } from '@alea/ui';

Examples

Area, hue, hex, presets, and the contrast against the page.

Accent

The ratio and the WCAG verdict for any pair.

Show 3 React Aria props

Pick a color by area, hue, hex or presets, with a live contrast check (Ant's ColorPicker, plus WCAG).

Prop	Type	Default	Description
`className`	`string`	-	Extra class names for the root element.
`contrastWith`	`string`	-	Check this color against a background and show the WCAG ratio.
`label`	`ReactNode`	-	The visible label above the picker.
`showField`	`boolean`	`true`	Show the hex field. Default true.
`swatches`	`string[]`	-	Preset colors to pick from (hex).

The contrast of a color pair with its WCAG verdict: AAA, AA, AA large or fail.

Prop	Type	Default	Description
`background`required	`string`	-	The background color (any CSS color).
`foreground`required	`string`	-	The text color (any CSS color).
`large`	`boolean`	-	Large text (24 px, or 18.66 px bold) needs 3:1 instead of 4.5:1.
`showSample`	`boolean`	`true`	Show the colors as a sample. Default true.

Key	Does
`Arrow keys`	Move the thumb
`Shift + arrows`	Bigger steps

Don't