Color Contrast Checker

What is Color Contrast Checker?

Color Contrast Checker is a free online WCAG contrast checker that measures the contrast ratio between a foreground and background color and grades it against every WCAG 2.x threshold: AA and AAA for normal text, AA and AAA for large text, and the 3:1 non-text requirement (SC 1.4.11) for UI components and icons. Enter colors as HEX, RGB, HSL, HWB or CSS keywords and get an exact ratio plus a live text preview.

Features

  • Exact WCAG math — spec-accurate relative luminance (0.03928 linearization threshold), matching WebAIM's checker
  • Honest pass/fail — badges are computed on the unrounded ratio, so a 4.4954 pair displays as 4.50:1 but still correctly fails AA normal text
  • All five thresholds — AA normal (4.5:1), AA large (3:1), AAA normal (7:1), AAA large (4.5:1) and non-text/UI (3:1)
  • Live preview — normal and large bold sample text rendered in your exact color pair
  • Opaque-only by design — translucent colors are rejected with a clear error instead of being silently composited, because WCAG contrast is only defined for opaque colors

What counts as large text?

WCAG defines large text as 18pt (24px) or larger, or 14pt (≈18.66px) or larger when bold. Large text gets relaxed thresholds (3:1 for AA, 4.5:1 for AAA) because bigger glyphs stay legible at lower contrast.

How to use

Type or paste a foreground and background color, or use the color pickers. The ratio and all five badges update live. (Converting a color between notations, or checking it against plain black/white? Use the [Color Converter](/color-converter).)

Privacy

Checks run entirely in your browser — the colors you enter are not uploaded. A public API endpoint is also available for programmatic use.

Read the full Color Contrast Checker guide and the Color Contrast Checker API reference.