Color Contrast Checker

✦ FREE ONLINE TOOL

Check the contrast between text and background colors using WCAG accessibility standards. Test color combinations, review AA and AAA compliance and find more accessible alternatives.

Choose Your Colors

Select foreground and background colors using the color pickers or enter HEX values directly.

Foreground / Text Color

HEX Value

Background Color

HEX Value

Quick combinations:

Contrast Ratio

Your selected colors are evaluated using the WCAG relative luminance contrast formula.

15.05:1

Contrast Ratio

Excellent Contrast

AA Normal Text (4.5:1)

AA Large Text (3:1)

AAA Normal Text (7:1)

AAA Large Text (4.5:1)

Live Text Preview

See how your selected colors look in a real-world text example.

Accessible Design Matters

Good color contrast helps make your website content easier to read for people with different visual abilities.

This is an example of large text.

Accessible Color Suggestions

Find alternative text colors that meet WCAG contrast requirements against your selected background.

WCAG guidance: Normal text generally needs a contrast ratio of at least 4.5:1 for AA and 7:1 for AAA. Large text needs 3:1 for AA and 4.5:1 for AAA. Large text means at least 18pt regular or 14pt bold. WCAG 2.2 also includes non-text contrast requirements for relevant interface components and graphical objects.