Brand Color Picker with Contrast Feedback

ProNew

Pick a brand color in a popover and immediately see how white and black text read on it (ratio and AA result in words), which text color to use, and a button sample, so unreadable choices are caught while choosing. Use this when a chosen color becomes a button or badge background.

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

People choose an accent color that will carry text (buttons, badges, banners) and should know right away if it is readable.

Do not use it when: For choosing text on an existing background, use the contrast checker directly.

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 color.
`onChange`	`(color, text) => void`	The new color and the better text color (`#ffffff` or `#000000`).

Accessibility

The picker is the Color Picker Popover (keyboard-operable area, sliders, hex field), and the results are in text: a ratio, a verdict in words ("Passes AA", "Large text only", "Fails") and a sentence that says which text color to use.
The sentence is a polite status, so a change of color is announced. The sample button demonstrates the recommendation with real styles.
Ratios are cut, not rounded, so a near miss never shows as a pass.

Testing

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