Color Contrast Checker

Measures the contrast between a text color and the surface behind it, and reports both models people are asked for: the WCAG 2.x ratio with a pass or fail against AA and AAA for normal text, large text, and user interface elements, and the APCA Lc value with the size and weight guidance that goes with it. Both colors accept any CSS syntax, including hex, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), and all 148 color names. When a pair fails, it works out the nearest foreground that passes by moving lightness in OKLCH while holding hue and chroma, so the suggestion still looks like your brand color.

Type or paste the two colors into the foreground and background boxes, or use the quick entry field for a whole pair at once, like "#333 on #fff". Pick the target level you actually have to hit, which decides what the suggestion aims at. A translucent color is flattened before it is measured, the foreground over the background and the background over white, and the report says when that happened. Every row has a copy button, and the pair round trips through the URL, so a shared link reopens the exact check.

The well known checkers give you one number and stop. This one gives you the ratio, every level it does and does not clear, the APCA value that WCAG 3 is being drafted around, and, when you fail, an actual color to use instead rather than a red cross. It reads modern CSS color syntax that older tools reject outright, and your inputs never leave your device, with no ads and no daily limit.

Why do WCAG and APCA disagree about my colors?

They model different things. The WCAG 2.x ratio compares relative luminance with a fixed 0.05 offset, which flattens the difference between dark colors and overstates it between light ones. APCA models perceived lightness contrast and takes polarity into account, so dark text on light and light text on dark score differently even at the same ratio. Dark themes are where they disagree most: a pair that clears AA can be genuinely hard to read, and a pair that fails AA can be fine.

What counts as large text?

WCAG defines large as 18pt and up, or 14pt and up when the text is bold, which is roughly 24px and 18.66px at the usual browser default. Large text only needs 3:1 for AA and 4.5:1 for AAA. Icons, input borders, focus rings, and other non text parts of the interface are covered by a separate rule and need 3:1 against what is next to them.

How is the suggested color chosen?

It converts your foreground to OKLCH, then searches for the smallest change in lightness, up or down, that reaches the target, holding hue and chroma fixed so the color still reads as the same color. Any chroma that no longer fits inside sRGB at the new lightness is reduced until it does. The search runs on the color rounded to eight bits per channel, so the hex you are given genuinely passes rather than passing only in floating point.