Color Contrast Checker

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

Colors
Check WCAG contrast ratios for foreground and background colors, including AA/AAA for normal and large text.
Results
Transparent colors are blended over white for contrast.
Contrast ratio
18.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.