textColor

textColor(color) returns 'white' or 'black' — whichever contrasts better as text on top of color, measured with APCA contrast. For helpers that adjust the input color itself until it's readable on a fixed background, see textColorWhenBackgroundIsBlack and textColorWhenBackgroundIsWhite.

Arguments

Name	Type	Description
color	string	The background color to place text on.

Returns: 'white' | 'black' — the color that reads better on top of color.

Examples

Auto-contrasting label

Picks a legible text color for a swatch from a single source color, deriving the foreground with a memo so it stays in sync.

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

function App() {
	const bg = signal('#ffcc00')
	const fg = memo(() => textColor(bg.read()))

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

render(App)