Color Contrast Checker.

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

Color Contrast Checker

Check color combinations for WCAG accessibility compliance

#000000
#FFFFFF
21.00:1
AA large text
AA normal text
AAA large text
AAA normal text

Large Text (18pt / 24px)

This is an example of normal text at 16px size. The WCAG 2.1 guidelines have different contrast requirements based on text size. This paragraph helps you see how your color combination looks in a real-world context with different text sizes.

This is small text at 14px size, which needs higher contrast to be accessible to users with visual impairments. Make sure your color combinations meet at least WCAG AA standards for text of this size.

Common Color Pairs

WCAG Guidelines

WCAG Level AA Requirements

  • Normal text (under 18pt): 4.5:1 minimum
  • Large text (18pt or 14pt bold): 3:1 minimum
  • UI components and graphical objects: 3:1 minimum

WCAG Level AAA Requirements

  • Normal text (under 18pt): 7:1 minimum
  • Large text (18pt or 14pt bold): 4.5:1 minimum

What these ratings mean

  • 7:1 or higher - Excellent contrast (AAA for all text)
  • 4.5:1 - 7:1 - Good contrast (AA for all text, AAA for large text)
  • 3:1 - 4.5:1 - Moderate contrast (AA for large text only)
  • Below 3:1 - Poor contrast (Fails all WCAG requirements)

Accessibility Tips

Beyond Contrast

Color contrast is just one aspect of accessibility. Also consider users with color blindness by not relying solely on color to convey information.

Font Selection

Sans-serif fonts are generally more readable on screens. Consider font weight and spacing to further improve readability.

Test with Real Users

While tools help meet technical standards, testing with real users, including those with visual impairments, provides the best insights.

How it works

Four steps.

  1. 01

    Choose your foreground and background colors using the color pickers.

  2. 02

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

  3. 03

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

  4. 04

    Review the guidelines to understand accessibility requirements.

Features

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.

FAQ

Questions.

Can't find an answer? Send us your question.

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.

Related tools

More Design & Color tools.

All 8 Design & Color tools →

Built by Infyways

Need more than a tool.

These utilities are made by the Infyways studio. When a free tool is not enough, we build the real thing.