What is WCAG contrast?

An accessibility standard defining the minimum contrast between text and its background for readability.

Which levels does it check?

It reports the ratio against the common AA and AAA thresholds.

Why does contrast matter?

Good contrast keeps content legible for people with low vision and in bright conditions.

design

Contrast Checker

DESIGNFREE · NO SIGNUP

Check WCAG color contrast for accessibility

Foreground (text)

Background

Large text — Aa

Normal body text. The quick brown fox jumps over the lazy dog.

Contrast ratio

17.06:1

Normal text (< 18pt)

AA · 4.5:1

AAA · 7:1

Large text (≥ 18pt / 14pt bold)

AA · 3:1

AAA · 4.5:1

Contrast Checker tests the colour contrast between text and background against WCAG accessibility guidelines, so your designs stay readable for everyone.

How to use Contrast Checker

01Enter your text and background colours.
02Read the contrast ratio and WCAG result.
03Adjust the colours until they pass.

Frequently asked questions

What is WCAG contrast?: An accessibility standard defining the minimum contrast between text and its background for readability.
Which levels does it check?: It reports the ratio against the common AA and AAA thresholds.
Why does contrast matter?: Good contrast keeps content legible for people with low vision and in bright conditions.
Is it free?: Yes, free with no sign-up.

● client-side● no upload● privacy-safe

design › contrast