Skip to content
KuponGuru

Color Contrast Checker

Check text and background colors against WCAG AA and AAA, preview them, and get the nearest color that passes.

FreeRuns in your browser

About the Color Contrast Checker

Choose a text color and a background and see their contrast ratio against the WCAG 2.2 thresholds for normal text, large text and interface components, with a live preview. When a pair fails, the checker finds the nearest color that passes — same hue, lightness moved as little as possible — so the fix still looks like your design.

How to use it

  1. 1Enter the text color and the background color.
  2. 2Read the ratio and which WCAG levels it passes.
  3. 3If it fails, use the suggested color that passes and copy it.

Questions

What contrast ratio do I need?

WCAG 2.2 level AA asks for at least 4.5:1 for normal text and 3:1 for large text — 24 px, or about 18.7 px bold — and 3:1 for icons and the outlines of controls. Level AAA asks for 7:1 for normal text and 4.5:1 for large text.

Why does 4.49:1 fail when it rounds to 4.5?

The WCAG thresholds are minimums and are not rounded. The checker compares the exact ratio and shows it truncated, so it never displays 4.50:1 next to a failure.

Is my text uploaded or stored?

No. The tool runs in this browser tab. What you paste is never sent to KuponGuru, and it is gone when you close the tab.

Related tools

NewFree

Color Converter

Convert any color between HEX, RGB, HSL, OKLCH, HSV and CMYK — type it the way you have it, copy it the way you need it.

DesignUse tool
NewFree

Color Palette Generator

Complementary, analogous, triadic and more from one color, plus a 50–950 shade scale to export as CSS or Tailwind.

DesignUse tool
NewFree

CSS Gradient Generator

Linear, radial and conic gradients with up to eight color stops, a live preview, and CSS or Tailwind to copy.

DesignUse tool

Looking for something else? Browse every tool.