Color Contrast Checker

The WCAG 2.1 contrast ratio is the norm sites are checked against today, so it drives the verdicts here: 4.5:1 for normal text, 3:1 for large text, 7:1 for the AAA level. The formula has a known weak spot, though: on dark backgrounds it gets things wrong. The classic case is a gray #777777 background, where the formula prefers black text even though the eye reads white noticeably better.

That is why the Lc value from APCA, a perceptual measure being prepared for WCAG 3, is shown alongside as a reference. When the two scores disagree, we say outright which way the old formula misleads and what to do about it.

Text is not the only thing that needs contrast. Input field borders, button outlines, icons and other non-text elements must reach 3:1 against the adjacent color under WCAG 1.4.11. The verdict shows this as a separate line, and the preview includes a border and an icon painted with your pair.

Buttons and labels are often painted with rgba, which contrast checkers reject or compute incorrectly. We composite colors the way a browser does: the background over a white page, the text over the resulting background, and we measure the contrast of the color the eye actually sees.

Anything CSS understands works as input: HEX, rgb(), hsl(), hwb(), lab(), oklch(), and named colors. Parsing is shared with our color converter, so both tools use the same dictionary and the same math. Large text by WCAG starts at 24 pixels, or 18.66 pixels for bold text; the preview shows samples of both.

What's next

To convert a color to another notation, use the color converter; to pull a palette from a picture, try palette from image. The gradient generator checks how text reads across a color transition.