Contrast checker

A little help along the way

Say what you want to do (pick a color, make a palette, check that text is readable or get colors from a photo) and open the color studio on a page of its own; gradients, brand colors and many colors at once are under More options. In the studio the workflows are on the left, your work in the middle and the current color, with its picker, on the right (in Convert on a phone). Convert a color, grow a palette, check contrast or create a gradient, dragging its stops along the track. From image reads a local picture; Brand colors has sourced company swatches. The guides explain gamut, transparency and what each export keeps.

Questions people ask

What contrast does WCAG ask for?

WCAG 2.2 asks for at least 4.5:1 for normal text and 3:1 for large text at level AA, and 7:1 and 4.5:1 at level AAA. Icons and the edges of controls need 3:1. The checker lists each of these as a pass or a fail.

Can I check a see-through colour?

Yes. Give the text or background an opacity and say what is behind them under Canvas behind transparency; the checker lays one over the other first, as a browser would, and judges what you would see.

What if my colours fail?

Choose 3:1, 4.5:1 or 7:1 and press Find a passing text color: it suggests an opaque text colour that reaches it on your background, checked again, and uses it only when you press Apply suggested text color.

Does a pass mean my whole site is accessible?

No. It checks one pair of colours against WCAG's contrast levels. Font size, weight and everything else about a page still need checking on their own.

This page is the Color utility, opened for this one job; every other tool it has is one press away. Each of its settings is explained on the Color utility's own page.

Keep going