Design Tools No uploads Runs in your browser

Color Contrast Checker

Use this WCAG color contrast checker to test foreground and background color combinations for readability. Enter hex colors, view the contrast ratio, and check WCAG AA and AAA pass status for normal text, large text, and interface design.

Share

Workspace

Use the tool below. Your inputs stay local when the tool supports browser-only processing.

All tools

The quick brown fox jumps over the lazy dog.

Small text sample for visual comparison.

Contrast Ratio
17.93:1
All WCAG checks passed

WCAG 2.1 Compliance

AA Normal Text(≥ 4.5:1)
PASS
AA Large Text(≥ 3:1)
PASS
AAA Normal Text(≥ 7:1)
PASS
AAA Large Text(≥ 4.5:1)
PASS
UI Components(≥ 3:1)
PASS
wcag color contrast checkercolor contrast checkerwcag contrast checkeraccessibility contrast toolaa aaa compliance checker

Workflow

How to use the Color Contrast Checker

1

Enter Foreground and Background Colors

Add text and background colors as hex values in the WCAG color contrast checker. The preview shows how the combination appears in real use.

2

Review AA and AAA Results

The WCAG color contrast checker calculates the contrast ratio and marks whether it passes normal text, large text, and interface contrast recommendations.

3

Adjust Until Accessible

Change either color until the ratio passes your target level. Use the WCAG color contrast checker while designing buttons, text, links, and UI states.

Color Contrast Checker — Frequently Asked Questions

What does a WCAG color contrast checker measure?

A WCAG color contrast checker measures the luminance contrast between foreground and background colors. The result helps determine whether text is readable for users with low vision.

Should I target AA or AAA contrast?

WCAG AA is the common accessibility target for most websites, while AAA is stricter. This checker shows both so you can choose the level that fits your design and compliance goals.