Tool2Help

Color Contrast Checker

Enter a text color and a background color to get the exact contrast ratio, plus a clear pass or fail against every WCAG 2.1 level.

Large text at 24px

Normal body text at 16px. The quick brown fox jumps over the lazy dog.

Small print at 13px, which is where contrast problems usually bite.

4.6:1
Contrast ratio

About the contrast checker

Contrast is the accessibility rule that gets broken most often, usually by well-meaning designers who picked a light gray because it looked calm. WCAG 2.1 sets a minimum ratio of 4.5:1 for normal body text and 3:1 for large text at level AA, rising to 7:1 and 4.5:1 at level AAA. This checker calculates the ratio using the official relative luminance formula and shows the result against each threshold, so you can nudge a color until it passes rather than guessing.

How to use the contrast checker

  1. Set the foreground color using the picker or by typing a HEX value.
  2. Set the background color the same way.
  3. Read the contrast ratio and the AA and AAA results for both normal and large text.
  4. Adjust either color until the combination passes the level you are targeting.

Frequently asked questions

What contrast ratio do I actually need?
For WCAG 2.1 level AA, which is the level most legislation references, you need at least 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold and above). Level AAA raises those to 7:1 and 4.5:1.
Do these rules apply to icons and buttons?
Yes. WCAG 2.1 added a non-text contrast requirement of 3:1 for user interface components and meaningful graphics, which covers icons, input borders, focus indicators and button backgrounds.
Does passing the contrast check make my site accessible?
It removes one common barrier, but accessibility is much broader. Keyboard navigation, semantic markup, form labels, focus order and alternative text all matter just as much. Treat contrast as a necessary first step rather than a finish line.
Why does gray text on white so often fail?
Contrast ratio is driven by relative luminance, and mid grays sit close to white on that scale. A gray needs to be roughly #767676 or darker to hit 4.5:1 against pure white, which is considerably darker than most people expect.

Other free tools people use alongside the Contrast Checker.

Color Converter Paste a color in any common format and get every other format back instantly, along with a live preview and a generated set of tints and shades. Color Color Picker Pick a color visually, refine it with precise sliders, and copy it in whichever notation your project needs. Color Gradient Generator Design a gradient visually and copy the CSS. Linear and radial, unlimited color stops, live full-width preview. Color QR Code Generator Turn a link or any text into a QR code, customize the colors, and download it as a high-resolution PNG. No watermark and no expiry. Generators