Skip to content
FR

Color contrast checker (WCAG)

Check the contrast between text and background colors against WCAG AA and AAA rules, and get the closest corrected color in one click.

  • Free
  • No sign-up
  • No file uploaded
  • Windows, Mac, Android, iPhone

Loading the tool…

About this tool

Check that text is readable on its background under WCAG 2 accessibility rules: contrast ratio, AA and AAA criteria for body text, large text and UI components, real preview. If the contrast is too low, the tool suggests the closest text or background color that passes.

When to use it

Validate a brand palette

Before settling a site's colors, check every text/background pair: trendy light grays often fail.

Fix an accessibility audit

A WCAG audit flags insufficient contrast: the automatic correction gives the closest passing shade to the original.

Buttons and icons

Field borders, icons and buttons must reach 3:1 against the background to be noticeable.

How to use

  1. Choose the text color and the background color.
  2. Read the contrast ratio and the WCAG criteria passed.
  3. Apply a corrected color if the contrast is too low.

How it works

The contrast ratio uses the WCAG formula: relative luminance of each color (after converting sRGB to linear light), then (L1 + 0.05) / (L2 + 0.05). It ranges from 1:1 (no contrast) to 21:1 (black on white).

The correction scans the color's lightness, toward lighter and darker, and keeps the value that reaches the threshold with the smallest change: the color stays recognizable.

Tips for best results

  • Aim for 4.5:1 for any text under 24 px, even legal notices.
  • Text on a photo must be checked against the photo's lightest area.
  • Contrast is not enough: never convey information by color alone.
  • Also test your colors with the color blindness simulator.

Common problems and fixes

No corrected color is suggested

Even black or white doesn't reach the threshold on this background (mid gray, for example). Change the background color.

The result differs from another tool

Rounding varies slightly; a ratio just below the threshold (4.49) fails everywhere.

My text uses a transparent color

The calculation uses opaque colors: use the actual visible color (blended with the background).

Frequently asked questions

How much contrast is needed?

WCAG AA requires 4.5:1 for body text and 3:1 for large text and UI components. AAA requires 7:1 and 4.5:1.

What counts as large text?

At least 24 px (18 pt), or 18.5 px (14 pt) bold. Below that, the body text threshold applies.

How are corrected colors computed?

The tool keeps your color's hue and saturation and only adjusts its lightness, as little as possible, until it reaches the AA or AAA threshold.

Is contrast mandatory?

For public websites in many countries (ADA guidance in the US, the European Accessibility Act), level AA is expected. Above all it's about readability for everyone, in sunlight or with tired eyes.

Related searches

Still stuck?

Ask on the forum: the category, the tool, your device sheet and the test result will be filled in for you.