🔲

Contrast Checker

Check color contrast ratios for WCAG accessibility compliance. Test text and background combinations for AA and AAA levels.

Design

Foreground (Text)

Background

17.40:1
Excellent

Live Preview

Large Text Preview (24px bold)

Normal text preview. This is how your regular body text would look with these color combinations. Make sure it's readable for all users, including those with visual impairments.

Small text is even harder to read with low contrast. Consider using larger fonts or better contrast.

WCAG Compliance

Normal Text (<18pt / <14pt bold)

AA (4.5:1)PASS
AAA (7:1)PASS

Large Text (≥18pt / ≥14pt bold)

AA (3:1)PASS
AAA (4.5:1)PASS

About WCAG Contrast Guidelines

  • AA: Minimum contrast required for most web content
  • AAA: Enhanced contrast for better accessibility
  • Normal text: Below 18pt (or 14pt if bold)
  • Large text: 18pt and above (or 14pt+ if bold)

✨ Features

  • ✓WCAG 2.1 AA and AAA compliance check
  • ✓Live contrast ratio display
  • ✓Text and large text criteria
  • ✓Color picker integration
  • ✓Pass/fail indicators
  • ✓Completely free to use

🆓 Free Alternative To

WebAIM Contrast CheckerContrast Ratio by Lea VerouAccessible ColorsColor Safe

No sign-up, no limits, no tracking. Just works.

Related Tools

🎨

Color Palette Generator

Generate harmonious color palettes with complementary, triadic, analogous, and monochromatic schemes.

🌈

Gradient Generator

Create beautiful linear and radial gradients with multiple color stops and copy CSS.

📝

Lorem Ipsum Generator

Generate placeholder text in classic Latin or hipster style for your designs and mockups.

📝

Text Editor

A rich text editor with formatting, word count, and export to HTML/Markdown.