Color Contrast Checker

Enter foreground color in Input and background color in Tool Settings to check WCAG contrast ratio.

  • Runs entirely in your browser
  • No data stored or sent to a server
  • Free forever — no signup
  • Instant conversion

Input and Output

Use the interactive encoder and decoder on this page to process your text.

Learn more about color

How to Check Color Contrast Ratios

Color Contrast

When to Check Contrast

Verify text and background color pairs meet WCAG accessibility guidelines before shipping UI components, marketing pages, or design system tokens. Contrast ratio affects readability for users with low vision and is required for many compliance audits.

WCAG Thresholds

WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). AAA raises the bar to 7:1 and 4.5:1 respectively. The tool calculates relative luminance and reports pass/fail against these levels.

Developer Tips

  • Test both light and dark mode pairs — swapped foreground/background changes the ratio
  • Semi-transparent colors blend with underlying layers — test against the actual rendered background
  • Pair with Color Convert to adjust HSL lightness until contrast passes

Frequently asked questions

Which WCAG level is checked?

Results show ratios against both AA and AAA thresholds for normal and large text sizes.

Do alpha channels affect contrast?

Yes. Transparent colors are composited against a background. Provide the effective foreground and background colors for accurate results.