What is color contrast?

Color contrast refers to the difference in light between foreground and background colors. Good contrast makes text readable for all users, including those with visual impairments.

What are the WCAG contrast requirements?

WCAG 2.1 defines these minimum contrast ratios: Level AA: 4.5:1 for normal text, 3:1 for large text Level AAA: 7:1 for normal text, 4.5:1 for large text

What counts as large text?

Large text is defined as: 18 point text or larger 14 point text or larger if bold

How is contrast ratio calculated?

Contrast ratio is calculated using the relative luminance of colors. The formula is: (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color's luminance and L2 is the darker color's luminance.

Color Contrast Checker

Check if your color combinations meet WCAG accessibility standards. Ensure your web content is readable for all users.

Foreground Color

#000000

Background Color

#FFFFFF

Preview

Large Text

This is an example of normal text. It helps you see how your color combination looks in a real-world context with different text sizes.

Contrast Ratio

21.00:1

AA large text: ✓

AA normal text: ✓

AAA large text: ✓

AAA normal text: ✓

WCAG 2.1 Guidelines

Level AA Requirements:

Small text (under 18pt): 4.5:1 minimum
Large text (18pt or above): 3:1 minimum

Level AAA Requirements:

Small text (under 18pt): 7:1 minimum
Large text (18pt or above): 4.5:1 minimum

Comprehensive Color Testing

Test your color combinations against WCAG accessibility standards with our easy-to-use tool.

Real-time Preview

See your color combinations instantly with both large and small text examples.

Accurate Measurements

Get precise contrast ratios calculated according to WCAG standards.

WCAG Compliance

Check compliance with WCAG 2.1 Level AA and AAA requirements.

Accessibility Guidelines

Learn about accessibility standards and make informed design decisions.

How to Use the Color Contrast Checker

Step 1

Choose your foreground and background colors using the color pickers.

Step 2

View the contrast ratio and WCAG compliance results in real-time.

Step 3

Check if your colors meet accessibility standards for different text sizes.

Step 4

Review the guidelines to understand accessibility requirements.

Frequently Asked Questions

More Accessibility Tools

Web Accessibility Checker

Scan for accessibility issues and ensure WCAG compliance with actionable insights.