Color Contrast Checker

Check if your color combinations meet WCAG accessibility standards for readability

Select Colors

Foreground Color (Text)

Background Color

Common Combinations

Preview & Results

Sample Text

This is how your text will look

Contrast Ratio

21:1

WCAG Compliance

AA Level (Normal Text) - 4.5:1 minimum

AA Level (Large Text) - 3:1 minimum

AAA Level (Normal Text) - 7:1 minimum

AAA Level (Large Text) - 4.5:1 minimum

About Color Contrast

What is Color Contrast?

Color contrast refers to the difference in light between foreground (text) and background colors. Sufficient contrast is essential for readability, especially for users with visual impairments.

WCAG Guidelines

The Web Content Accessibility Guidelines (WCAG) define the following contrast ratios:

AA Level (minimum): 4.5:1 for normal text and 3:1 for large text
AAA Level (enhanced): 7:1 for normal text and 4.5:1 for large text
Large text is defined as 18pt (24px) or 14pt (18.5px) bold and larger

Why Accessibility Matters

Ensuring sufficient color contrast makes your content accessible to people with visual impairments, including color blindness and low vision. It also improves readability for all users, especially in challenging viewing conditions like bright sunlight.