Color Contrast Checker

Check color contrast for accessibility compliance

Color Contrast Checker

Check color contrast for accessibility compliance

🎨 Foreground Color (Text)

RGB: rgb(31, 41, 55)

🎨 Background Color

RGB: rgb(243, 244, 246)

📄 Text Preview

Sample Heading

This is normal text to demonstrate readability. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is small text that might be harder to read with poor contrast.

📈 Contrast Analysis

Contrast Ratio: 21:1
Perfect contrast

WCAG 2.1 Compliance:

AA Normal Text
Minimum 4.5:1
✓ PASS
AA Large Text
Minimum 3:1
✓ PASS
AAA Normal Text
Minimum 7:1
✓ PASS
AAA Large Text
Minimum 4.5:1
✓ PASS

⚡ Quick Presets

Features

  • ✓ WCAG 2.1 compliance checking
  • ✓ Real-time contrast calculation
  • ✓ Live text preview
  • ✓ Quick color presets

How to Use

  1. 1. Select your foreground (text) color
  2. 2. Choose your background color
  3. 3. View the contrast ratio and preview
  4. 4. Check WCAG compliance results

More Color Tools

Color Picker

Pick colors and create palettes

HEX to RGB Converter

Convert HEX color codes to RGB values

RGB to HEX Converter

Convert RGB values to HEX codes