textColorWhenBackgroundIsWhite

textColorWhenBackgroundIsWhite(color) iteratively darkens color in 5% steps until it reaches APCA Lc ≥ 60 on a white background, capped at 20 steps, returning the adjusted hex string. For the black-background companion see textColorWhenBackgroundIsBlack; to simply pick 'white' or 'black' for text on a color, see textColor.

Arguments

Name	Type	Description
color	string	The color to make readable on white.

Returns: string — the adjusted color as a hex string.

Examples

Keep a brand color readable on white

Shifts a user-chosen color dark enough to stay legible against a white panel, deriving the adjusted hex with a memo.

import { render, signal, memo } from 'pota'
import { textColorWhenBackgroundIsWhite } from 'pota/use/color'

function App() {
	const brand = signal('#ffcc00')
	const readable = memo(() =>
		textColorWhenBackgroundIsWhite(brand.read()),
	)

	return (
		<div style={{ 'background-color': 'white', padding: '1rem' }}>
			<input
				value={brand.read()}
				on:input={e => brand.write(e.currentTarget.value)}
			/>
			<p style={{ color: readable }}>Readable on white</p>
		</div>
	)
}

render(App)