ToolWren › Contrast

WCAG Contrast Checker

Check whether your text and background colors meet WCAG accessibility contrast requirements, with a live preview.

100% client-side · nothing is uploaded

Loading tool…

How to use the Contrast

Set your text color and background color using the swatches or HEX fields.
The contrast ratio and a live preview update instantly.
Check the WCAG AA and AAA pass/fail results for normal and large text.
Use Swap to test the reverse combination, and adjust colors until you pass.

Privacy: this tool runs entirely in your browser. Your input is never sent to, received by, or stored on any server — there are no uploads and no tracking of what you enter.

About Contrast

Why contrast matters

Low contrast between text and its background makes content hard to read, especially for users with low vision. The WCAG accessibility guidelines define minimum contrast ratios that good designs should meet.

AA and AAA levels

WCAG sets thresholds: 4.5:1 for normal text and 3:1 for large text at level AA, and 7:1 (normal) / 4.5:1 (large) at the stricter AAA level. This checker grades your colors against all four.

How it works

Enter or pick a text and background color and the tool computes the exact contrast ratio using the official relative-luminance formula, then shows pass/fail for each WCAG level with a live preview.

Frequently asked questions

What contrast ratio do I need?

At least 4.5:1 for normal text (WCAG AA), or 3:1 for large text (18pt+ or 14pt bold).

What is large text?

Roughly 18pt and larger, or 14pt and larger if bold.

Does this guarantee accessibility?

Contrast is one important factor; also consider font size, spacing and not relying on color alone.