Contrast Checker

WCAG 2.1 contrast ratio checker for accessibility

Foreground
Background
β€”
Contrast Ratio

Live Preview

Heading Text (24px Bold)

This is normal body text at 16px. Check if it's readable against the background. Good contrast ensures accessibility for all users, including those with visual impairments.

This is small text at 12.8px β€” requires higher contrast for WCAG AAA compliance.

πŸ”— More Color Tools

🏠 Home 🧠 AI Palette 🎨 Color Mixer πŸŒ— Shades πŸ”„ Converter πŸ‘οΈ Blindness Sim

Frequently Asked Questions

What WCAG levels does this contrast checker test?

This contrast checker tests both WCAG AA (minimum contrast of 4.5:1 for normal text, 3:1 for large text) and WCAG AAA (enhanced contrast of 7:1 for normal text, 4.5:1 for large text). Results are shown instantly as you adjust colors.

What is considered "large text" in WCAG guidelines?

WCAG defines large text as 18pt (24px) or larger for regular weight, or 14pt (approximately 18.67px) or larger for bold text. Large text has lower contrast requirements because it is inherently easier to read at bigger sizes.

Can I test contrast for UI components?

Yes, the contrast checker works for any foreground and background color combination, including UI components like buttons, icons, and borders. For non-text UI components, WCAG 2.1 requires a minimum contrast ratio of 3:1 against adjacent colors.

Frequently Asked Questions

What color formats are supported?

Supports HEX, RGB, HSL, HSV, CMYK and more color formats with instant conversion.

Can I pick colors from an image?

Yes, upload an image and click any pixel to extract its exact color value.

Is the color picker free?

Yes, completely free with no ads on core features.