Design system

ContrastPair

A WCAG contrast check for one pair, in Light and Dark.

import { ContrastPair } from "@flinbu/seed";

Text, and a focus ring

Primary buttonText needs 4.5:1

Aalight

–

Aadark

–

Tertiary text on secondaryText needs 4.5:1

Aalight

–

Aadark

–

Focus ringIcons and borders need 3:1

light

–

dark

–

import { ContrastPair } from "@flinbu/seed";

<div className="flex w-full max-w-2xl flex-col gap-lg">
  <ContrastPair label="Primary button" fg="var(--button-primary-text)" bg="var(--button-primary)" themes={["light", "dark"]} />
  <ContrastPair label="Tertiary text on secondary" fg="var(--text-tertiary)" bg="var(--bg-secondary)" themes={["light", "dark"]} />
  <ContrastPair label="Focus ring" kind="ui" fg="var(--border-accent-primary)" bg="var(--bg-primary)" themes={["light", "dark"]} />
</div>

Use it for

Checking tokens before publishing.
Pluto's contrast findings.

Use something else for

Decorative pairs that carry no meaning.

Props

Prop	Type	Default	Description
`fg / bg`	`string`	–	CSS colors, usually tokens.
`kind`	`'text''large''ui'`	`'text'`	Threshold.
`themes`	`string[]`	–	Side by side, each in its own data-theme.
`label / description`	`ReactNode`	–	Heading.

Accessibility

A failing pair says 'Fails 4.5:1' in words, not only in red.
Ratios round down, so a pass is never overstated.