Color Contrast Checker

Check if your color combinations meet WCAG accessibility guidelines.

Enter a hex color code

Enter a hex color code

Contrast Ratio

0.00:1

Poor contrast

WCAG Compliance

AA Small Text (4.5:1)
✗
AA Large Text (3:1)
✗
AAA Small Text (7:1)
✗
AAA Large Text (4.5:1)
✗

Preview

Small Text (16px)

The quick brown fox jumps over the lazy dog. This is a sample text to demonstrate how your color combination looks with normal-sized text.

Color combination: #101010 on #E2E2E2

Large Text (24px)

Large Heading Text

This demonstrates how your colors work with larger text sizes, which have more relaxed contrast requirements.

Accessibility Tips

WCAG AA (Minimum)

  • • Required for legal compliance in many regions
  • • 4.5:1 ratio for normal text (under 18pt)
  • • 3:1 ratio for large text (18pt+ or 14pt+ bold)
  • • Suitable for most web content

WCAG AAA (Enhanced)

  • • Higher standard for better accessibility
  • • 7:1 ratio for normal text
  • • 4.5:1 ratio for large text
  • • Recommended for critical content

How to Use

🎨 Choose Your Colors

  • • Use the color pickers to select text and background colors
  • • Type hex codes directly (e.g., #FF0000 for red)
  • • Click "Random Colors" to generate random combinations
  • • Use "Swap Colors" to reverse text and background

📊 Check Results

  • • View the contrast ratio (higher is better)
  • • Check WCAG compliance levels (AA/AAA)
  • • See real-time preview with your colors
  • • Copy the contrast ratio for documentation

🔗 Share Your Results

The URL automatically updates with your color choices, making it easy to share specific color combinations with others.

/color/color-contrast-checker?text=101010&bg=e2e2e2

💡 Quick Tips

For Body Text

Aim for at least 4.5:1 contrast ratio (WCAG AA)

For Headings

Large text needs at least 3:1 contrast ratio

For Excellence

Target 7:1 ratio for AAA compliance