EN

Color contrast checker

Check whether your text color is readable on its background. Enter both colors and see the WCAG contrast ratio, pass or fail results and a live preview.

Free and private. Everything runs in your browser, nothing is uploaded.

How it works

  1. Enter the colorType or paste the value in the input.
  2. Copy the resultThe converted value is at the top of the list.
  3. Explore moreOther formats, contrast and shades are below.

Readable for everyone

About one in twelve men has some color vision deficiency, and many more people read screens in bright sunlight or with ageing eyes. The Web Content Accessibility Guidelines therefore set minimum contrast ratios: 4.5:1 for normal text and 3:1 for large text and interface elements at level AA, 7:1 and 4.5:1 at level AAA.

The ratio is calculated from the relative luminance of both colors exactly as WCAG 2 defines it. Use Swap to test light text on a dark background and back again, and pick a darker or lighter shade from the palette until the result passes.

Transparent colors

If the text color has transparency, it is blended with the background first, so the ratio matches what users actually see.

Frequently asked questions

What counts as large text?

At least 24 px regular or about 19 px bold. Large text needs a ratio of 3:1 for AA.

Which color formats can I type?

Anything valid in CSS: HEX with 3, 4, 6 or 8 digits, rgb(), hsl(), hwb(), lab(), oklch() and color names.

Is the CMYK value exact for printing?

It is a simple conversion without a printer profile. For professional print use the CMYK values from your print shop's profile.

What contrast ratio do I need?

WCAG AA asks for 4.5:1 for normal text and 3:1 for large text and interface parts.

Why does OKLCH matter?

It matches how people see lightness, so palettes and gradients made in OKLCH look even.