#991
Text color
Color field for a text color measured against a white page, with a sample line in that color.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Text color" pattern (@codeatlasdev/ui demo #991, inputs/color-field) in my app.
Call get_demo({ ids: ["#991"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Choosing text colors that must reach WCAG AA.
Keep these library parts, with the props and tokens the demo uses:
- ColorField from "@codeatlasdev/ui"
Behaviour to keep:
- `<ColorField` with `label="Body text"`, `bind:value={text}`, `against={page}`, `minRatio={4.5}` and `format="oklch"`
- `page` is the constant `'#ffffff'`
- Initial value is `$state('#6b7280')`
- Below the field, a white box shows a sample sentence painted in the current color
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- ColorField
@codeatlasdev/ui
How it is built
- `<ColorField` with `label="Body text"`, `bind:value={text}`, `against={page}`, `minRatio={4.5}` and `format="oklch"`
- `page` is the constant `'#ffffff'`
- Initial value is `$state('#6b7280')`
- Below the field, a white box shows a sample sentence painted in the current color
Related
Loading source.