Readable Text Color Chooser

ProNew

Choose a background color and get the text color that reads best on it, with both ratios and a pass or fail for AA, a live sample, and the nearest passing background if neither black nor white works. Use this when users colour badges, cards or tags themselves.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

initial

Guide and examples

When to use it

Users pick background colors (labels, calendars, tags) and the app must choose text that stays readable.

Do not use it when: If you control all the colors, put the text color in your design tokens.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`initial`	`string`	The starting background.
`onChange`	`(background, text) => void`	The new background and `#ffffff` or `#000000`.

pickTextColor(rgba) and nearestBackground(rgba, target) are exported. Black or white always reaches AA (4.5 : 1) on any background; AAA (7 : 1) needs the right background.

Accessibility

The answer is a polite status in words (color, ratio, pass or fail), and both ratios are listed in a description list; the sample shows the result on screen but nothing depends on seeing it.
Black or white always reaches AA, so the interesting case is AAA: with the checkbox on, a background that cannot reach 7 : 1 is reported in words and the nearest one that can is offered as text with a decorative swatch.
The color field validates what is typed and keeps invalid text as typed (see Color Field).

Testing

The pattern ships with a Testing Library test (accessible-text-color-chooser.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

Users pick background colors (labels, calendars, tags) and the app must choose text that stays readable.

Do not use it when: If you control all the colors, put the text color in your design tokens.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`initial`	`string`	The starting background.
`onChange`	`(background, text) => void`	The new background and `#ffffff` or `#000000`.

pickTextColor(rgba) and nearestBackground(rgba, target) are exported. Black or white always reaches AA (4.5 : 1) on any background; AAA (7 : 1) needs the right background.

Accessibility

The answer is a polite status in words (color, ratio, pass or fail), and both ratios are listed in a description list; the sample shows the result on screen but nothing depends on seeing it.
Black or white always reaches AA, so the interesting case is AAA: with the checkbox on, a background that cannot reach 7 : 1 is reported in words and the nearest one that can is offered as text with a decorative swatch.
The color field validates what is typed and keeps invalid text as typed (see Color Field).

Testing

The pattern ships with a Testing Library test (accessible-text-color-chooser.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.