Color Contrast Checker

Ensure your text is readable and accessible.

Sample Text

This is how your text will look.

Contrast Ratio

3.68

to 1

Normal Text

WCAG AA
WCAG AAA

Large Text (18pt+)

WCAG AA
WCAG AAA

About the Color Contrast Checker

This tool is essential for creating accessible web content. It calculates the contrast ratio between a foreground color (like text) and a background color. It then tells you whether your color combination meets the Web Content Accessibility Guidelines (WCAG) standards for different text sizes. Using colors with sufficient contrast is crucial for users with low vision.

How to Use This Tool

  1. Choose Colors: Use the color pickers to select your desired foreground and background colors.
  2. View Ratio: The contrast ratio is calculated and displayed instantly.
  3. Check WCAG Ratings: The tool will show you whether your color combination passes WCAG AA and AAA standards for both normal and large text.