Color Contrast Checker

Check the WCAG contrast ratio between text and background, with AA and AAA pass/fail.

About the Color Contrast Checker

Check the WCAG contrast ratio between text and background, with AA and AAA pass/fail. Every value is computed locally with vanilla JavaScript — there is no server round-trip, no sign-up and no limit on how many times you use it.

How to use

Step 1

Set text color

Choose your foreground (text) color.

Step 2

Set background color

Choose the background the text sits on.

Step 3

Read the ratio

The contrast ratio and a live text preview update instantly.

Step 4

Check the badges

See at a glance whether the pair passes WCAG AA and AAA.

Benefits

Ship accessible text

Catch low-contrast combinations before they reach users.

Know the exact ratio

Get the precise number, not just a pass or fail.

Test quickly

Swap colors and re-check in real time.

Features & supported formats

Features

Foreground and background inputs
Live preview text
Exact contrast ratio
AA and AAA pass/fail badges
Large-text thresholds

Supported formats

HEXContrast ratio

Accuracy & limitations

The ratio here follows the WCAG relative-luminance formula and is exact for two solid colors; what it cannot tell you is whether the result is genuinely readable for everyone.

The ratio uses the WCAG 2.x relative luminance formula and is accurate for solid, opaque colors.
It cannot evaluate text over a gradient, an image or a semi-transparent overlay. Check such cases against the least favourable point manually.
Passing a ratio does not guarantee readability for everyone. Font size, weight, letterforms and screen quality all matter, and contrast alone does not address color-vision deficiency.
WCAG 2.x thresholds are what most policies reference. Alternative perceptual measures exist and can disagree with this ratio, particularly for very light or very dark pairs.

Frequently asked questions

What contrast ratio do I need?

WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively.

What counts as large text?

Large text is roughly 24px and above for regular weight, or about 18.66px and above when bold.

Why does contrast matter?

Sufficient contrast ensures people with low vision or in bright conditions can read your text comfortably.

Does the ratio consider color blindness?

Contrast ratio is based on luminance; pair this tool with the color blindness simulator for a fuller picture.

Can I check white on a color?

Yes. Set the foreground to white and the background to your color to test button and badge legibility.