UUtiliTools
home/Web & SEO/color-contrast

Color Contrast Checker

Check WCAG 2.1 contrast ratios between text and background colors for accessibility compliance.

Text Color

Background Color

Contrast Ratio

17.06:1

Excellent

WCAG Compliance

AA Level

Normal text (4.5:1) Large text (3:1)

AAA Level

Normal text (7:1) Large text (4.5:1)

Live Preview

The quick brown fox

The quick brown fox jumps over the lazy dog. This sentence uses every letter of the alphabet.

Small text sample for checking readability at body text size.

WCAG AA

Level AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold).

WCAG AAA

Level AAA requires a minimum contrast ratio of 7:1 for normal text and 4.5:1 for large text. This is the highest standard.

Relative Luminance

Contrast is calculated using the WCAG relative luminance formula, which accounts for how the human eye perceives brightness.

Email

How to Use Color Contrast Checker

Check color contrast ratios against WCAG accessibility standards. Ensure text and backgrounds meet AA and AAA compliance.

1

Enter Foreground Color

Pick or enter the text color using a color picker or hex code.

2

Enter Background Color

Pick or enter the background color to check against the foreground.

3

Check Compliance

View the contrast ratio and see if it passes WCAG AA and AAA levels.

Common Use Cases

Web Accessibility

Ensure website text colors meet WCAG standards for users with visual impairments.

UI Design Review

Validate color choices in design mockups before handing off to development teams.

Brand Guidelines

Verify that brand colors can be used accessibly in digital text applications.

Pro Tips

  • -WCAG AA requires 4.5:1 for normal text and 3:1 for large text contrast.
  • -AAA level requires 7:1 for normal text, providing the highest accessibility.
  • -Test both light and dark mode color schemes for complete accessibility coverage.