Color & Design

Color Contrast Checker

Check how readable your text color is on its background. The ratio and pass or fail verdicts update as you change either color.

Color & design

Contrast between two colors

Local only

Text colorText valueBackgroundBackground value

Large heading preview

Body text at a normal size, which is the hardest case for readability. If this feels effortless to read, your contrast is doing its job.

PassAA — normal text — needs 4.5:1
PassAA — large text (18pt / 14pt bold) — needs 3:1
PassAAA — normal text — needs 7:1
PassAAA — large text — needs 4.5:1
PassAA — UI components & graphics — needs 3:1

Contrast ratio14.68:1

CSS paircolor: #1f2937; background: #ffffff;

Calculated on your device

The ratio uses the official WCAG relative-luminance formula, computed in your browser.

What the ratio means

Contrast is expressed as a ratio between the lighter and darker color, from 1:1 (identical) to 21:1 (pure black on pure white). 4.5:1 is the usual minimum for body text, 3:1 for large headings and interface elements.

Improving a failing pair

Darken the text rather than lightening the background if the background carries your brand.
Increase font size or weight — large text has a lower requirement.
Avoid mid-grey on mid-grey; small lightness changes move the ratio a long way.

Good to know

Frequently asked questions

Which formula is used?

The WCAG 2.1 relative luminance formula, the same one used by accessibility auditing tools.

Does color blindness affect the ratio?

No — luminance contrast is colour-blind safe, which is exactly why the standard uses it instead of hue differences.

What counts as large text?

18pt (about 24px) regular, or 14pt (about 18.66px) bold and above.

Does opacity change the result?

Yes, in real pages. Check the final blended colors rather than a semi-transparent value.

Contrast between two colors

What the ratio means

Improving a failing pair

Frequently asked questions

Related tools

Color Converter

Color Picker

HEX to RGB Converter