What is a color contrast checker?

A color contrast checker computes the luminance-based contrast ratio between a text color and a background color and tells you whether it meets accessibility standards. Use the tool above to get your answer instantly - it is free and requires no signup.

How do I check WCAG contrast for text?

Enter your text and background hex colors in the checker above — it reports the exact WCAG contrast ratio plus AA and AAA pass/fail verdicts using the official 4.5:1 and 7:1 normal-text thresholds.

What contrast ratio is required for accessibility?

WCAG requires at least 4.5:1 for normal text (AA) and 7:1 for the stricter AAA level; large text (18pt+/14pt bold+) only needs 3:1 for AA. The checker above rates your pair against all of these.

What is the difference between AA and AAA contrast?

AA is the standard conformance level: 4.5:1 for normal text. AAA is the enhanced level at 7:1 — harder to hit with brand colors, but better for low-vision readers. The tool above shows a separate Yes/No verdict for each.

How do I check if my text color passes contrast?

Paste your text color and its background color into the checker above. If "Passes AA" says No, darken the text (or lighten the background) and re-run until it says Yes — the displayed ratio tells you how far off you are.

Contrast Checker (WCAG AA/AAA)

What is Contrast checker?

Contrast Checker — Free contrast checker — test any text and background color pair against WCAG AA and AAA contrast ratios and get an instant pass or fail verdict.

The ratio is computed with the WCAG 2.0 math from the vendored contrast-ratio engine by Lea Verou (MIT): its Color class's get luminance() (relative luminance, .2126/.7152/.0722 channel weights with the 0.03928 gamma branch) and its contrast() ratio formula (lighter+0.05)/(darker+0.05), used verbatim. Ratings use the real WCAG thresholds for normal text: AA at 4.5:1, AAA at 7:1. Colors are treated as fully opaque hex values.

Why use this contrast checker?

🎯

Built for contrast checker

Free contrast checker — test any text and background color pair against WCAG AA and AAA contrast ratios and get an instant pass or fail verdict.

📋

Transparent & honest

Colors must be hex values (3-digit is expanded, e.g. #fff → #ffffff); named colors and rgb()/hsl() strings are rejected.

🔒

Private by design

Everything runs in your browser. Your inputs never leave your device.

📱

Works everywhere

Fully responsive — perfect on desktop, tablet, and mobile. No app needed.

🔄

Regularly updated

Regularly maintained and reviewed to ensure accuracy.

💡

Free forever

No accounts, no limits, no watermarks. Use Contrast Checker as much as you need.

How to use Contrast Checker

1Type your text color into the "Text color" box as a hex value like #ffffff.
2Type your background color into the "Background color" box as a hex value like #000000.
3Run the tool to compute the WCAG contrast ratio between the two colors.
4Read the WCAG rating and the Passes AA / Passes AAA verdicts.
5If AA fails, darken or lighten one color and re-run until it passes.

What can you do with Contrast Checker?

Color contrast checker — Free contrast checker — test any text and background color pair against WCAG AA and AAA contrast ratios and get an instant pass or fail verdict.
Check wcag contrast for text — Free contrast checker — test any text and background color pair against WCAG AA and AAA contrast ratios and get an instant pass or fail verdict.
Contrast ratio required for accessibility — Free contrast checker — test any text and background color pair against WCAG AA and AAA contrast ratios and get an instant pass or fail verdict.
Difference between aa and aaa contrast — Free contrast checker — test any text and background color pair against WCAG AA and AAA contrast ratios and get an instant pass or fail verdict.

Good to know

Colors must be hex values (3-digit is expanded, e.g. #fff → #ffffff); named colors and rgb()/hsl() strings are rejected.
Both colors are treated as fully opaque — semi-transparency is not modeled.
Ratings use normal-text thresholds (AA 4.5, AAA 7); the "AA Large" rating applies the 3:1 large-text threshold.
The ratio is rounded to one decimal for display; pass/fail verdicts use the full-precision value.

How it works

The ratio is computed with the WCAG 2.0 math from the vendored contrast-ratio engine by Lea Verou (MIT): its Color class's get luminance() (relative luminance, .2126/.7152/.0722 channel weights with the 0.03928 gamma branch) and its contrast() ratio formula (lighter+0.05)/(darker+0.05), used verbatim. Ratings use the real WCAG thresholds for normal text: AA at 4.5:1, AAA at 7:1. Colors are treated as fully opaque hex values.

Examples

White on black

Status: ok — 21.0 : 1, WCAG rating AAA, passes AA and AAA.

Medium gray on white

Status: ok — about 3.5 : 1, WCAG rating AA Large: passes large-text AA only, fails normal-text AA and AAA.

Same color twice

Status: ok — 1.0 : 1, WCAG rating Fail: identical colors have no contrast.

People also search for these — this tool handles them all:

contrast checkercolor contrast checkercheck wcag contrast for textcontrast ratio required for accessibilitydifference between aa and aaa contrast