Color contrast checker

Check WCAG contrast ratios for foreground and background colors, including AA/AAA for normal and large text.

Colors

Choose the foreground and background colors to compare.

Results

Transparent colors are blended over white for contrast.

Contrast ratio18.88:1
AA (normal): PassAA (large): PassAAA (normal): PassAAA (large): Pass
Foreground#111111
Background#FFFFFF

Aa Bb Cc 123

Preview

Normal text / Large text

Normal text

Aa Bb Cc 123

Large text

Aa Bb Cc 123

What is color contrast?

Contrast ratio measures the difference in luminance between text (foreground) and its background on a scale from 1:1 (no contrast) to 21:1 (black on white).

This tool converts colors to sRGB, blends transparency before comparing colors, and uses the WCAG relative luminance formula.

WCAG thresholds

  • AA: 4.5:1 for normal text, 3:1 for large text.
  • AAA: 7:1 for normal text, 4.5:1 for large text.
  • Large text is 18pt+ regular or 14pt+ bold.
  • UI components, icons, and graphical objects should aim for at least 3:1.

Higher ratios improve readability, especially for thin fonts or small sizes.

How to use

Enter foreground and background colors, or choose them with the color controls. Results update automatically with the WCAG contrast ratio and AA/AAA status. Swap the colors to check the inverse combination.