Contrast Checker

What it's for

Text needs enough contrast with its background to be read, especially by people with low vision or on a screen in sunlight. This checks a pair of colours by WCAG 2’s contrast ratio, which accessibility laws and audits use, and by APCA, the method drafted for WCAG 3, which matches how people actually see light and dark text better. When a pair fails, it suggests the nearest text colour that passes.

For example, when a designer’s grey #8a8a8a on white looks fine to you, check it here: it fails WCAG AA for normal text at 3.45 : 1, and the nearest grey that passes is given, ready to copy.

How to use it

Type the Text colour and Background as any CSS colour (#5b6178, rgb(0 0 0 / 60%), oklch(…), rebeccapurple), or pick them with the colour boxes. A see-through colour is blended over the one behind it (the background over white). Swap exchanges them. As you type you see:

• A preview at three text sizes.
• Nearest passing text colours: the closest colour of the same hue that reaches AA, AAA and APCA’s body text level, each with a Copy button (shown only when the current one doesn’t).
• WCAG 2: the ratio’s pass or fail for normal and large text at AA and AAA, and for icons and borders.
• APCA: the Lc value against its simple guide, from body text (Lc 75 to 90) down to dividers (Lc 15). Lc is positive for dark text on a light background and negative the other way round; the size counts, not the sign.

Copy a link to this input keeps both colours.

Example

Choose Try an example, which sets the text to #8a8a8a on #ffffff.

The message reads WCAG 2: 3.45 : 1 (large text only). APCA: Lc 62.1. It fails normal text at AA, and the nearest passing colours are listed: a darker grey for AA, a darker one still for AAA.

Good to know

WCAG 2.x is still the standard that laws and audits use. APCA is a draft whose levels may change, so use it as a second opinion. Neither takes font weight, size or anti-aliasing into account beyond the levels listed, and colour blindness isn’t covered (use the Colour Blindness Simulator). The suggestions keep the hue and change only the lightness, so a very light or saturated colour may lose some of its character.