Skip to main content

Color Contrast Checker

New

Check WCAG 2.1 AA/AAA color contrast ratios for foreground and background pairs.

colorcontrastwcagaccessibilitya11y
Read the guide
Shortcuts:⌘ KSearch

Normal text (16px) — The quick brown fox jumps over the lazy dog.

Large text (18px bold) — WebdevToolbox

Small text (14px) — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

AA Normal
AA Large
AAA Normal
AAA Large
AA Normal text: ≥ 4.5:1 contrast ratio
AA Large text: ≥ 3:1 (18pt or 14pt bold)
AAA Normal text: ≥ 7:1 contrast ratio
AAA Large text: ≥ 4.5:1 contrast ratio

Frequently Asked Questions

What does the Color Contrast Checker do?

The Color Contrast Checker helps designers and developers work with color — converting between formats, checking accessibility contrast ratios, and building harmonious palettes for digital products.

What color formats does Color Contrast Checker support?

The tool supports HEX, RGB, RGBA, HSL, HSLA, HSV, and named CSS colors. Convert between any of these formats instantly with a single click.

Does the Color Contrast Checker check WCAG accessibility?

Yes. The tool calculates the contrast ratio between foreground and background colors and clearly indicates whether the combination meets WCAG 2.1 Level AA (4.5:1) and Level AAA (7:1) accessibility standards.

Can I export colors from the Color Contrast Checker?

Yes. Color values can be copied in any supported format with a single click. Palettes can also be exported as CSS custom properties or JSON for seamless integration into design systems.

Is the Color Contrast Checker free?

Yes, completely free. All color operations run in your browser with no account, no subscription, and no data sent to any server.

Related Tools