Large text, 24 point

Normal text at the size most body copy uses, so you can judge the pair by eye as well as by the number.

Without JavaScript the boxes below are disabled, and nothing is measured.

Contrast has no direction: swapping the two colors gives the same ratio. The swap is there to preview the pair the other way round.

WCAG Contrast Checker

The ratio between two colors, and exactly which WCAG thresholds it clears — named, so you can check the claim yourself.

WCAG 2.1 thresholdsNothing is stored

What the number means

Contrast ratio compares how much light two colors reflect, on a scale from 1:1 (identical) to 21:1 (black against white). It is calculated from the colors themselves, using the formula in WCAG, and it takes no account of typeface, screen brightness or the room you are sitting in.

The thresholds on this page are quoted from WCAG 2.1, the W3C Recommendation, with the success criterion named against each so you can look it up: 1.4.3 Contrast (Minimum) at level AA asks for 4.5:1 for normal text and 3:1 for large; 1.4.6 Contrast (Enhanced) at level AAA asks for 7:1 and 4.5:1; and 1.4.11 Non-text Contrast at level AA asks for 3:1 for interface components and graphics. "Large" is WCAG's own definition: at least 18 point, or 14 point bold.

Why the ratio is never rounded up

A pair measuring 4.4999:1 is shown as 4.49, not 4.50, and it fails the 4.5 threshold — because it does. Rounding a near miss into a pass is the one thing a checker must not do, so the figure here is truncated and the comparison uses the exact value.

What passing does and does not mean

Meeting a threshold satisfies one success criterion for one pair of colors. It does not make a page accessible: that depends on focus order, labels, headings, keyboard operation, motion, language and much else, and it certainly cannot be decided by a single number. Treat a pass as one box ticked, not a verdict.

It also assumes the colors are what a visitor actually sees. Text over a photograph, a gradient or a translucent panel has a different ratio in every part of it, and a checker measuring two flat values cannot tell you about the worst spot.

To write a color three ways, use the Color Converter; to see one at full-screen size, the Color Picker.

Note

Everything is calculated in your browser from the two values you type. Nothing is sent anywhere, and this page reports what WCAG says rather than certifying anything.

All color utilities

See the category →

Swatches preview a tool’s default color or pattern. Some tools do not have a swatch.