Contrast Checker

Calculate the contrast ratio between foreground and background colors to ensure your design meets WCAG accessibility standards.

Colors

Choose your foreground and background colors.

Foreground

Background

Preview

See how your text looks on the background.

Large Text

Normal text. The quick brown fox jumps over the lazy dog. Accessibility is essential for an inclusive web.

Results

WCAG 2.1 compliance status.

21.00Contrast Ratio

AA NormalSmall text (below 18pt)

Pass

AA LargeLarge text (above 18pt)

Pass

AAA NormalSmall text (below 18pt)

Pass

AAA LargeLarge text (above 18pt)

Pass