Color Contrast Checker

Enter foreground color in Input and background color in Tool Settings. Reports pass/fail for normal and large text at AA and AAA thresholds — ratio calculator for debugging, not a compliance certification. Semi-transparent foreground colors are composited on the background before calculating contrast.

  • 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 foreground colors are composited on the solid background you provide — test against the actual rendered background in layered UIs
  • Pair with Color Convert to adjust HSL lightness until contrast passes

Frequently asked questions

Which WCAG thresholds are reported?

Output shows pass/fail for normal text and large text (18pt+ or 14pt+ bold) at AA and AAA ratio thresholds. This is a debugging calculator — not a compliance certification.

Do alpha channels affect contrast?

Semi-transparent foreground colors are composited on the background color you enter in Tool Settings before calculating contrast. Layered or image backgrounds are not simulated.