uxresources.info logo

Color Contrast Checker

Check color contrast ratios according to WCAG 2.1 accessibility standards

Select Foreground Color (Text)

Select Background Color

ℹ️ How to use: Click on the color boxes or input hex/RGB values to select your foreground and background colors. The contrast ratio will be calculated automatically and checked against WCAG standards.

Preview

The quick brown fox jumps over the lazy dog
Large Text Example
Small text example for minimum standards
21:1
Contrast Ratio
Foreground: 0.00
Background: 1.00
Relative Luminance
WCAG AA (Normal Text)
✓
PASS Requires 4.5:1 or higher
WCAG AA (Large Text)
✓
PASS Requires 3:1 or higher
WCAG AAA (Normal Text)
✓
PASS Requires 7:1 or higher
WCAG AAA (Large Text)
✓
PASS Requires 4.5:1 or higher

WCAG 2.1 Guidelines

🟡 WCAG AA Level

Normal text: 4.5:1 minimum

Large text: 3:1 minimum (18pt+ or 14pt+ bold)

Required for public websites and general compliance.

🟢 WCAG AAA Level

Normal text: 7:1 minimum

Large text: 4.5:1 minimum (18pt+ or 14pt+ bold)

Enhanced contrast for users with low vision. Recommended for education and medical sites.

💡 Tips for Better Contrast

  • Avoid using color alone to convey information
  • Test with real content and actual sizes
  • Use tools like WAVE for full page analysis
  • Consider colorblind-friendly palettes

📱 Responsive Considerations

  • Test on multiple devices and screens
  • Consider ambient lighting conditions
  • Test with screen magnification (200%)
  • Verify with colorblind simulation tools
Good artists copy, Great artists steal.Pablo Picasso