TanodTools
EN

Color contrast checker

Enter a text colour and a background colour to get the WCAG contrast ratio and a pass or fail for AA and AAA, for normal and for large text, with a live preview.

Runs in your browser; nothing you type leaves your device

Contrast ratio –

UseNeedsResult
Normal text, AA4.5:1
Normal text, AAA7:1
Large text, AA3:1
Large text, AAA4.5:1

Uses the WCAG 2.x contrast ratio, which measures luminance contrast only. It cannot judge colour-blindness pairs such as red on green, thin or small fonts, or text over images and gradients. Reads HEX (3, 4, 6 or 8 digits), rgb(), hsl() and CSS colour names; other CSS colour syntax is read by your browser where it can.

How to check colour contrast

  1. Type or paste the text colour and the background colour as HEX, rgb(), hsl() or a CSS colour name such as navy, or pick each with the colour picker.
  2. Read the contrast ratio, from 1:1 for no contrast to 21:1 for black on white.
  3. Check the table: normal text needs 4.5:1 for AA and 7:1 for AAA, and large text needs 3:1 for AA and 4.5:1 for AAA. The preview shows how the text looks.

What the contrast ratio means

The WCAG contrast ratio compares the brightness of two colours. Each colour is turned into a relative luminance between 0 (black) and 1 (white), using the sRGB values with the gamma curve removed and the three channels weighted by how bright the eye finds them: green most, then red, then blue. The ratio is the lighter luminance plus 0.05 divided by the darker luminance plus 0.05, so it runs from 1:1 for identical colours to 21:1 for black on white.

WCAG 2 sets minimums by text size. Normal text needs 4.5:1 for level AA and 7:1 for the stricter level AAA. Large text, which is easier to read, needs 3:1 for AA and 4.5:1 for AAA. Large means at least 24 px, or about 18.7 px in bold.

The ratio looks at lightness only. Two colours can pass and still be hard to tell apart for people with colour blindness, and thin fonts or text over a photo may need more contrast than the minimum. Use the figure as a floor and look at the preview.

For developers / AI agents

Need to check contrast in code, in a build step or from an AI agent? There is an API for it: see the colour contrast checker API guide.

Tips

Questions

How is the contrast ratio calculated?

With the WCAG 2.x formula: each colour's relative luminance is worked out from its sRGB values, and the ratio is (lighter + 0.05) divided by (darker + 0.05). It ranges from 1:1 (no contrast) to 21:1 (black on white). The ratio is shown to two decimals and the unrounded value is shown beside it.

What ratios do AA and AAA require?

Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text, meaning at least 24 px regular or about 18.7 px bold, needs 3:1 for AA and 4.5:1 for AAA. A ratio is not rounded up across a limit: 4.499:1 is shown as 4.49 and fails AA for normal text.

Why does #777777 on white fail AA?

Its contrast is 4.48:1, just under the 4.5:1 that AA asks for normal text, so it fails for body text but passes for large text, which needs only 3:1. A slightly darker grey such as #767676 reaches 4.54:1 and passes.

What happens with transparent colours?

A partly transparent text colour is blended with the background first, the way a screen shows it, and the blended colour is measured. A partly transparent background is assumed to sit on white. Channels are rounded to whole numbers after blending.

Does a passing ratio mean the text is accessible?

Not by itself. The ratio measures lightness contrast only. It says nothing about colour-blindness pairs, very thin fonts, text on photos or gradients, or whether colour is the only way a meaning is shown. Treat it as a minimum, not a guarantee.

Is anything sent to a server?

No. The colours are read and measured in your browser, and nothing you type leaves your device.