Skip to content
Webmaster Tools
CSS & designContrast Checker

Color Contrast Checker

WCAG AA and AAA for text colors.

Not a CSS color.
Not a CSS color.

Hex, rgb(), hsl() or a named color. A translucent text color is measured as it looks on the background; the background itself is treated as opaque.

About the Color Contrast Checker

This tool measures the contrast ratio between a text color and a background color and checks it against the WCAG 2 accessibility levels. It uses the WCAG relative luminance formula, so the result matches what Lighthouse, axe and browser devtools report. A translucent text color is blended onto the background first, which is how it actually looks on screen.

You get the ratio, a pass or fail for AA and AAA at normal and large text sizes, and the 3:1 check for UI components such as borders, icons and focus rings. When a pair fails, the tool suggests the closest text colors that reach 4.5:1: the same hue and saturation, made just dark or light enough. The live preview shows large text, body text, small print and an outlined button in your colors.

How to use it

  1. Enter a text color and a background color, or use the color pickers.
  2. Read the ratio and the pass/fail badges.
  3. If it fails, click a suggested color to try it.
  4. Use the swap button to check the inverted pair, for example for dark mode.

Examples

Common questions

What counts as large text?

WCAG defines large text as at least 24px (18pt) regular or 18.66px (14pt) bold. Large text only needs 3:1 at AA and 4.5:1 at AAA.

Why does 4.48:1 fail when it rounds to 4.5?

WCAG thresholds are not rounded, so the ratio must be 4.5 or more. The tool rounds the displayed value down for that reason.

Does contrast apply to disabled buttons and logos?

No. WCAG exempts inactive controls, decorative text and logotypes.