Free tool

Colour contrast

Pale grey text on white looks elegant and nobody can read it on a phone in the sun. Enter two colours: you get the WCAG ratio, a verdict, and the closest colour that passes.

Hex (#13243a), rgb(), hsl() or a CSS name (navy).

Contrast ratio

–

The quick brown fox

Here is a paragraph of body text at the usual size of an article. Is it comfortable to read for a while? A link in the text.

Small text: fine print, captions, footnotes.

Button

The thresholds

4.5 : 1

AA, body text

The minimum required by accessibility standards (WCAG 2) and by most public organisations.

Applies to text under 24 px (or 18.66 px bold).

3 : 1

Large text and controls

Headings of 24 px and more, and the outline of buttons, fields and icons.

Also the minimum for charts.

7 : 1

AAA

The enhanced level: very comfortable for everyone, including people with low vision.

Worth aiming for on long texts.

How the ratio is calculated

Each colour gets a relative luminance, from 0 (black) to 1 (white), that takes into account how the eye perceives red, green and blue. The ratio is (lighter + 0.05) ÷ (darker + 0.05): from 1:1 (same colour) to 21:1 (black on white). The suggestion keeps the hue and saturation of your colour and only changes its lightness.

Frequently asked questions

Is my text contrasted enough against its background?

Enter two colours: the tool calculates the WCAG ratio, gives a verdict and suggests the closest colour that passes. The calculation runs in your browser.

What ratio do I need to reach?

At least 4.5:1 for body text (level AA), 3:1 for large text (24 px and more, or 18.5 px bold) and for controls, and 7:1 for the enhanced AAA level.

How is the suggested colour chosen?

The suggestion keeps the hue and saturation of your colour and only changes its lightness, so your visual identity stays recognizable, with a contrast that passes.