What is a good contrast ratio?

WCAG 2.1 asks for at least 4.5 to 1 for body text and 3 to 1 for large text, which means 24 pixels and above, or 19 pixels and above when bold. The enhanced level asks for 7 to 1 and 4.5 to 1. Interface elements like icons and control borders need 3 to 1.

How is contrast ratio calculated?

Each color is converted to a relative luminance, a weighted measure of how much light it emits that accounts for the eye being far more sensitive to green than to blue. The ratio is the lighter luminance plus 0.05, divided by the darker luminance plus 0.05. It runs from 1 to 1 for identical colors up to 21 to 1 for black on white.

Does contrast depend on which color is the text?

No. The ratio is symmetric, so swapping text and background gives the same number. What changes is how it reads: light text on a dark background can look thinner at the same ratio, which is worth checking by eye as well as by number.

Does passing WCAG mean the text is readable?

It means it clears a measurable floor, which is not the same thing. The ratio knows nothing about font weight, letter spacing, screen brightness or the room you are sitting in. Treat a pass as necessary rather than sufficient, and look at the preview.

Why does my color fail on white but pass on black?

Because contrast is a property of the pair rather than of one color. A mid-tone sits at a similar luminance to white and far from black, or the other way round. Most colors that fail one will comfortably pass the other.

Contrast checker

Pick a text color and a background and see whether the pair is legible. A contrast ratio compares how much light two colors emit, on a scale from 1 to 1 for identical colors up to 21 to 1 for black on white. WCAG asks for 4.5 to 1 on body text.

Text color

Background

4.37:1Large text only

FailAA body textText under 24px, or under 19px bold4.5:1
FailAAA body textThe enhanced bar for the same sizes7:1
PassAA large textText 24px and over, or 19px bold and over3:1
FailAAA large textThe enhanced bar for large text4.5:1
PassAA interfaceIcons, borders and control edges3:1

Closest passing color to the one you chose, holding the hue and moving only lightness:

Darker4.59:1
1 lightness point away. Click to use it.

Large text at 24 pixels

Body text at 16 pixels. Contrast is a property of a pair rather than of one color, so a color that fails against this background may be perfectly readable against another.

Small print at 13 pixels, which is where contrast usually fails first.

What the thresholds mean

Two levels, and a size boundary that catches people out more often than the numbers do.

Level AA

The bar almost every accessibility policy and procurement rule actually enforces. 4.5 to 1 for body text, 3 to 1 for large text and for interface elements like icons and the edges of form controls.

Level AAA

The enhanced bar, at 7 to 1 and 4.5 to 1. Worth aiming for on long-form reading and anything a person will be looking at for a while, but rarely mandated.

What counts as large

24 pixels and above, or 19 pixels and above if the text is bold. This is the line people miss most often, because a heading at 20 pixels regular is still body text as far as the standard is concerned.

What the ratio cannot tell you

It knows nothing about font weight, letter spacing, screen brightness or ambient light. A thin weight at 4.5 to 1 can be markedly harder to read than a medium weight at the same number. Use the preview as well as the score.

Common questions

What is a good contrast ratio?: WCAG 2.1 asks for at least 4.5 to 1 for body text and 3 to 1 for large text, which means 24 pixels and above, or 19 pixels and above when bold. The enhanced level asks for 7 to 1 and 4.5 to 1. Interface elements like icons and control borders need 3 to 1.
How is contrast ratio calculated?: Each color is converted to a relative luminance, a weighted measure of how much light it emits that accounts for the eye being far more sensitive to green than to blue. The ratio is the lighter luminance plus 0.05, divided by the darker luminance plus 0.05. It runs from 1 to 1 for identical colors up to 21 to 1 for black on white.
Does contrast depend on which color is the text?: No. The ratio is symmetric, so swapping text and background gives the same number. What changes is how it reads: light text on a dark background can look thinner at the same ratio, which is worth checking by eye as well as by number.
Does passing WCAG mean the text is readable?: It means it clears a measurable floor, which is not the same thing. The ratio knows nothing about font weight, letter spacing, screen brightness or the room you are sitting in. Treat a pass as necessary rather than sufficient, and look at the preview.
Why does my color fail on white but pass on black?: Because contrast is a property of the pair rather than of one color. A mid-tone sits at a similar luminance to white and far from black, or the other way round. Most colors that fail one will comfortably pass the other.

All tools