[ @sdxc/u/a11y ]

forced-color-adjust

Applies forced-color-adjust, defaulting to "none" so author colours survive where colour itself carries the information — swatches, chart legends, syntax highlighting.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { forcedColorAdjust } from "@sdxc/u/a11y";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.forcedColorAdjust()`	`css({ forcedColorAdjust: "none" })`
`u.forcedColorAdjust("preserve-parent-color")`	`css({ forcedColorAdjust: "preserve-parent-color" })`

Examples

Basic example

Use forcedColorAdjust(), scoped with forcedColors(), to keep colors that carry meaning. Turn on a forced-colors mode to compare:

Flat

Down

<div mix={[...]}>
	<div
		mix={[
			bg("success.solid"),
			fg("success.onSolid"),
			forcedColors(forcedColorAdjust()),
			...,
		]}
	>
		Up
	</div>
	<div
		mix={[
			bg("warning.solid"),
			fg("warning.onSolid"),
			forcedColors(forcedColorAdjust()),
			...,
		]}
	>
		Flat
	</div>
	<div
		mix={[
			bg("danger.solid"),
			fg("danger.onSolid"),
			forcedColors(forcedColorAdjust()),
			...,
		]}
	>
		Down
	</div>
</div>

Keeping the parent's color

Pass preserve-parent-color to opt out of forced colors while still inheriting the color the system gives the parent:

Featured

<p mix={[fg("brand"), inlineFlex(), gap(2), ...]}>
	<svg
		mix={[fill("currentColor"), forcedColors(forcedColorAdjust("preserve-parent-color"))]}
		viewBox="0 0 24 24"
		width={20}
		height={20}
		aria-hidden="true"
	>
		<path d="M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.2l-6.1 3.4 1.4-6.8L2.2 9.1l6.9-.8z" />
	</svg>
	Featured
</p>

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.forcedColorAdjust())

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.forcedColorAdjust())

Signature

u.forcedColorAdjust(value?: ForcedColorAdjustValue)