/ deck / lab / contrast

Contrast checker.

WCAG AA / AAA contrast checker for any colour pair, with real text preview at three sizes and a one-click "suggest a passing variation" that finds the smallest hue-preserving change.

Foreground

Background

—

contrast ratio

AA · Large —

AA · Normal —

AAA · Large —

AAA · Normal —

A wizard is never late. Nor is he early.

He arrives precisely when he means to. Normal body text at the standard reading size — the workhorse of any interface. A link example.

Small text — caption, footnote, fine print. The quick brown fox jumps over the lazy dog.

Try a pair: site default grey on white (fails AA) blue link white on terracotta caution stripes navy on gold

How it works

Contrast is the ratio of relative luminance between two colours, defined in the WCAG 2 spec. 4.5:1 is the threshold for AA-level normal text and 7:1 for AAA. Large text — ≥18pt regular, or ≥14pt bold — gets a more relaxed threshold of 3:1 (AA) or 4.5:1 (AAA). The luminance formula is from W3C's G18 technique.

The "suggest a passing variation" button walks the foreground (preferred, since text usually has more flexibility) through HSL lightness in 1% steps until the ratio passes AA Normal (4.5:1). If the foreground can't reach the threshold within its own hue, it falls back to nudging the background. The result is the smallest hue-preserving change that passes — not the closest perceptually, but close enough.

No dependencies — pure browser, pure WCAG formula.

Planned

Palette mode — paste a list of hex codes, get a contrast matrix at once.
Colour-blind simulation — deuteranopia, protanopia, tritanopia.
APCA support — the new perceptual contrast formula slated for WCAG 3.

v0.1 · 2026