OneFreePlace — Color Contrast Checker

Readable design feels effortless.

The quick brown fox jumps over the lazy dog. This preview uses your exact colors, font size and font weight.

Example control

WCAG ratio—

Relative luminance—

Perceptual ΔL—

Large text?—

Click any format to copy it.

Smart repairs

Perceptual OKLCH lightness repairs that preserve hue/chroma as far as the sRGB gamut allows.

Standards interpretation

Perceptual note: the signed OKLCH ΔL value is an experimental design aid only. Positive values mean a lighter background than foreground; negative values indicate reverse polarity. It is not a WCAG conformance metric. W3C's 10 September 2026 WCAG 3 Working Draft still leaves the contrast measure undetermined.

Link contrast

Link color

Body text

Background

Link has a non-color cue at rest (for example underline) Link gains a non-color cue on hover/focus

If color alone identifies links in body text, WCAG technique guidance expects at least 3:1 against surrounding text plus an additional visual cue on hover/focus. A persistent underline or other non-color cue avoids relying on color alone.

UI component / focus indicator

Component or indicator color

Adjacent color

For WCAG 2.2 non-text contrast, meaningful control boundaries, states, graphical objects and focus indicators generally need at least 3:1 against adjacent colors.

Design token matrix

Import or add brand/system colors, choose a target, and see every foreground/background pairing at once.

Matrix target

Import CSS variables / JSON / name-color lines

Image contrast lab

Drop an image here or choose a file
Images stay on your device. Up to 20 MB.

Accessibility color report

A practical summary for designers and developers.

Color Contrast Checker

Make color readable, not merely compliant.

Readable design feels effortless.