← All guides

What is color contrast (WCAG)? Ratios, AA and AAA

· 2 min read

Text that looks nice but is hard to read is a problem, especially for people with low vision and for anyone looking at a phone in sunlight. WCAG defines a contrast ratio to measure that readability.

What is the contrast ratio?

The contrast ratio turns the brightness difference between the text color and the background color into a number from 1:1 to 21:1. 1:1 is the same color (no difference) and 21:1 is black on white (the greatest difference).

How is it calculated?

First the relative luminance of each color is calculated (red, green and blue get different weights, following how a screen produces light). Then the two luminances are compared with this formula:

ratio = (lighter luminance + 0.05) / (darker luminance + 0.05)

The ratios WCAG asks for

WCAG 2 defines two conformance levels:

Examples (on a white background)

A few really calculated values:

#0f1b2d dark navy     17.28:1  passes AAA
#1d4ed8 dark blue      6.70:1  passes AA
#767676 gray           4.54:1  just passes AA
#777777 gray           4.48:1  fails AA
#3b82f6 bright blue    3.68:1  AA for large text only
#999999 light gray     2.85:1  fails

A tiny shade difference (#767676 vs #777777) can decide whether AA passes. Gray text is the color that fails most often.

What counts as large text?

In WCAG, text of at least 18 point (about 24 pixels), or at least 14 point (about 18.7 pixels) when bold, counts as large and a lower ratio is enough.

Try it yourself

Enter a text and a background color into the color contrast checker: the ratio, a preview and whether AA and AAA pass appear in one table. Nothing leaves your browser.

This article is general information. Legal accessibility requirements vary by country and sector.

More guides