Color Contrast Checker

Preview

Make room for good ideas.

A little clarity goes a long way.

Collect your ideas, keep the details in order, and make time for the work that matters. Everything you need, in one place.

Made for your everyday.

Check the contrast between text and background colors

Two colors can look attractive in a mockup yet be difficult to read when applied to small text or controls. Enter a foreground and background HEX color to see their contrast ratio and how the combination performs against WCAG 2.x AA and AAA text thresholds. The preview places those colors in common text, button and interface contexts so you can judge the pairing beyond one number.

What do the WCAG contrast results mean?

  • Normal text: at least 4.5:1 for AA and 7:1 for AAA.
  • Large text: at least 3:1 for AA and 4.5:1 for AAA. WCAG large text is at least 24px regular or about 18.7px bold.
  • Meaningful UI components and graphical objects: a 3:1 non-text contrast threshold may apply against adjacent colors.

The pass/fail decision uses the unrounded ratio even when a displayed value has fewer decimal places. A passing color pair does not mean an entire web page or component conforms to WCAG: other color combinations, states, focus styles, semantics and interactions still need checking.

How to test a color pair

  1. Enter the foreground and background HEX values or choose colors with the picker.
  2. Read the contrast ratio and the normal-text, large-text and UI results.
  3. Inspect the live interface preview. Change a color and compare the result before applying it to your design.

Common questions

Is 4.5:1 enough for every type of text?

It is the WCAG AA contrast minimum for normal text. AAA has a higher 7:1 target; large text has different thresholds.

Does an AA pass mean my website is accessible?

No. This tool checks one supplied color pair. Accessibility also depends on other foreground/background pairs and many requirements beyond contrast.

Can I test transparency, gradients or an entire webpage?

Not in this version. The checker evaluates a pair of solid HEX colors using the WCAG 2.x contrast calculation; it is not a webpage scanner or APCA/WCAG 3 test.