Color contrast checker

How readable is this text on this background?

Check the WCAG contrast of text on a background, see which levels it passes, and get a nearby color that does.

Text color

Background color

Contrast ratio

4.54:1

4 of 5 checks passed.

Large text sample

The quick brown fox jumps over the lazy dog.

WCAG 2.2 checks

Normal text, level AA OK

Success criterion 1.4.3: needs at least 4.5:1.
Large text, level AA OK

Success criterion 1.4.3: needs at least 3:1.
Normal text, level AAA Problem

Success criterion 1.4.6: needs at least 7:1.
Large text, level AAA OK

Success criterion 1.4.6: needs at least 4.5:1.
Icons and controls, level AA OK

Success criterion 1.4.11: needs at least 3:1.

Nearest text color that passes

Level AAA, normal text (7:1): #595959

How to use

Enter the text color and the background color in any CSS form, or tap a swatch to pick one. The swap button exchanges them.
Read the ratio and the list of checks: normal text, large text and icons or controls, at levels AA and AAA.
If a check fails, copy the nearest text color that passes. It keeps the hue and changes only the lightness.

Grey text on a white background

Text colour (HEX)	Contrast ratio
#000000	21:1
#595959	7:1
#767676	4.54:1
#777777	4.47:1
#999999	2.84:1

How it works

The Web Content Accessibility Guidelines (WCAG 2.2) rate how well text stands out from its background by a contrast ratio from 1:1 (no difference) to 21:1 (black on white). Level AA asks for at least 4.5:1 for normal text and 3:1 for large text, which is 18 point or larger, or 14 point and bold (success criterion 1.4.3). Level AAA asks for 7:1 and 4.5:1 (1.4.6). Icons, form borders and other parts you need to see must reach 3:1 (1.4.11).

The ratio is (L1 + 0.05) ÷ (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 of the darker one. Relative luminance is 0.2126 R + 0.7152 G + 0.0722 B of the linearized red, green and blue values. For example #767676 on white has L = 0.181 against 1, so (1 + 0.05) ÷ (0.181 + 0.05) is 4.54:1. The ratio is cut, never rounded up: 4.499 does not meet 4.5.

A text color with transparency is first laid over the background, and a background with transparency over white. The suggested color keeps the hue and chroma of your text color and moves only its lightness (in OKLCH) to the nearest value that passes, so it still looks like your color. Contrast is only one part of readability: font, size and weight matter too, and the ratio says nothing about color-blind readers beyond lightness.

Frequently asked questions

What is large text in WCAG?

Text of at least 18 point (24 px), or at least 14 point (about 18.7 px) and bold. It needs less contrast because bigger letters are easier to read.

Which level should I aim for?

Level AA is the usual legal and design target. Level AAA is stricter and is not always possible for a whole site, but is worth using for long reading text.

Does the ratio depend on which color is the text?

No. The ratio is the same if you swap the two colors. Only the sample and the suggested replacement change, because the suggestion adjusts the text color.

Does passing the contrast test make my page accessible?

No. It checks only colour contrast. Keyboard access, text alternatives and other accessibility requirements still matter.

Why does a ratio just below 4.5 fail normal-text AA?

The threshold is 4.5:1, without rounding up. The displayed ratio is cut to two decimals so a failing value does not appear to pass.

More in Web & developer

All 18 utilities in Web & developer