Contrast Checker

What the ratio measures

The Web Content Accessibility Guidelines (WCAG) judge whether text can be read against its background by a single number, the contrast ratio. It compares how much light the two colours give off, their relative luminance, on a scale from 1:1 (the same colour twice, unreadable) to 21:1 (black on white). Luminance is not the same as how light a colour looks in a colour picker: the formula undoes the sRGB gamma curve first and then weighs green far above red and blue, because that is how sensitive the eye is to each. That is why a pure blue that looks bright on screen can still fail on black.

The ratio does not care which colour is the text and which is the background. Swapping them gives the same number, which is why the Swap colours button never changes the result, only the preview.

The thresholds

WCAG 2 sets two levels. AA is the one laws and procurement rules usually point at: 4.5:1 for normal text and 3:1 for large text. AAA is the enhanced level: 7:1 for normal text and 4.5:1 for large. "Large" means at least 24 px (18 pt) regular, or about 18.7 px (14 pt) bold; the preview above shows both sizes in your colours. Icons, input borders and other parts of an interface that people need to see to use the page have a threshold of their own, 3:1 (success criterion 1.4.11), listed here as Icons and UI parts.

Worked examples

#767676 on white comes out at 4.54:1, which makes it the lightest grey that still passes AA for body text. It passes AAA only for large text. One step lighter, #777777, is 4.47:1 and fails AA for normal text. That gap is why the ratio here is never rounded up: a 4.47 shown as "4.5" would look like a pass. #595959 on white is 7.00:1, the point where AAA for normal text begins. Black on white is the maximum, 21.00:1.

Translucent text

Type an eight-digit hex such as #00000080 (black at half opacity) and the checker blends it over the background the way a browser paints it, then measures the blend. Black at 50% on white becomes a mid grey, 4.00:1, which passes AA only for large text. The background has to be solid: a see-through background takes on the colour of whatever is behind it, so it has no ratio on its own.

What it does not do

It checks one pair at a time, as typed hex. To see how a set of colours holds apart for people with colour blindness, contrast included, use the colour blindness simulator; to work a colour out in another notation first, the colour converter. It measures WCAG 2's ratio, not the APCA model proposed for a future WCAG 3, which weighs text size and weight into the score and is not yet a standard anyone is held to.

Link to this tool

The address bar always carries the pair you are looking at, so a link to it opens on the same two colours. Write one by hand like this:

Link to this tool with values filled in

Everything after the # stays in your browser — it is never sent to a server — so a link like this opens the tool ready to go without the values travelling anywhere but the address bar:

https://crunchify.net/tools/contrast-checker#text=767676&background=ffffff

Join the settings with &, and percent-encode each value so that spaces, newlines and any #, &, = or % inside one do not break the link. Leave a setting out to accept its default. If a setting is not recognised, the page says so rather than quietly ignoring it.

• text (also fg, foreground, color or colour) — text, up to 16 characters, defaults to 767676. The text colour, as hex with or without the # (767676, #767676, #777, or #00000080 for translucent text).
• background (also bg or back) — text, up to 16 characters, defaults to ffffff. The background colour, as solid hex with or without the # (ffffff, #fff).