ToolToUse

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

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.

14.68:1Excellent contrast
  • 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.

Keep exploring

View all

Color Converter

Convert colors between HEX, RGB and HSL with a live preview.

Color & DesignOpen
Popular

Color Picker

Pick any color and read its HEX, RGB and HSL values instantly.

Color & DesignOpen

HEX to RGB Converter

Turn a HEX color code into RGB and CSS-ready values.

Color & DesignOpen

RGB to HEX Converter

Convert RGB channel values into a HEX color code.

Color & DesignOpen

HEX to HSL Converter

Convert HEX colors into hue, saturation and lightness.

Color & DesignOpen
Popular

Color Palette Generator

Build harmonious palettes from any base color.

Color & DesignOpen