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.