Color contrast checker

Check a text and background pair against every WCAG 2 threshold at once, with a live sample in both sizes and the ratio as you adjust the colors.

Large text reads at a glance

Body copy is the harder case: it carries the detail, it is set smaller, and it is where a ratio that looked fine in a heading starts to cost people readability.

Contrast ratio4.83:1
AA body text4.5:1Pass
AA large text3:1Pass
AAA body text7:1Fail
AAA large text4.5:1Pass
UI and graphics3:1Pass
Made something you like?Blocks built on accessible tokens

Questions

Which thresholds does WCAG 2 set?+

4.5:1 for body text at AA and 7:1 at AAA. Large text, meaning 24px regular or 18.66px bold and above, drops to 3:1 at AA and 4.5:1 at AAA. Interface parts and meaningful graphics need 3:1.

Does passing AA mean the pair is readable?+

It means it clears a floor. The ratio is a formula over relative luminance, and it says nothing about typeface weight, size or the surrounding colors. Treat a pass as necessary rather than sufficient, and look at the sample above the numbers.

Where do these colors come from?+

Both fields open an OKLCH picker, so you can nudge lightness on its own and watch the ratio move, which is usually the fastest route from a failing pair to a passing one that still looks like the brand.

What is APCA, and should I use it instead?+

It is the contrast model proposed for WCAG 3, and it matches how text actually reads far better than the ratio here does, particularly for light text on dark backgrounds. It is not yet what anyone is audited against, so the honest answer is to pass WCAG 2 and use APCA to settle arguments.

Related tools

The tools are free. So is most of the library.

1935 blocks and 989 pieces for shadcn/ui and Tailwind, built on the same tokens these tools write. Install one with a command and the code is yours.

No signup for the tools. MIT for free blocks, commercial licence for Pro.

Markdown version