WCAG Contrast Checker

Any CSS colour in, contrast ratio out, plus the nearest colour that passes. Paste a palette below to check every pair.

Text / foreground

Background

–

Large text reads at 3:1

Body text needs 4.5:1 for AA. This sentence is set at the size most paragraphs on the web use, which is where low contrast hurts most.

Small print, captions and footnotes: the first thing to disappear on a phone in sunlight.

Nearest passing colours

Same hue and saturation, only lightness moves (in OKLCH). Click one to use it.

Check a whole palette

Paste colours in any form: a list, CSS custom properties, a Tailwind config, a stylesheet. Hex, rgb(), hsl(), hwb(), lab(), oklch() are picked out.

Highlight pairs passing

Rows are text, columns are background. Each cell shows the ratio, printed in the text colour on the background colour. Faded cells fall short. Click a cell to load that pair above.