WCAG Contrast Checker

What is WCAG contrast?

The WCAG guidelines define how much contrast text must have against its background to stay readable, as a ratio that compares the relative luminance of the two colors. This tool computes the contrast ratio live and shows exactly which WCAG success criteria your color pair passes or fails.

What are the required ratios?

• AA Normal text: at least 4.5:1.
• AA Large text: at least 3:1.
• AAA Normal text: at least 7:1.
• AAA Large text: at least 4.5:1.

Is my data safe?

Yes. The ratio is computed locally in your browser; your colors never leave your device. No signup or install is required.

What the ratios mean

• 4.5:1 is the AA threshold for normal text.
• 3:1 is the AA threshold for large text (18px+ or 14px bold).
• 7:1 is AAA for normal text; around 4.5:1 for large.
• These targets apply to text on background, including text over images.

Passing on paper, failing on screen

A ratio can pass yet still look muddy after antialiasing or at thin font weights. Check with actual font size and weight before publishing, and treat the numeric pass as a floor rather than a guarantee of readability.

How to use WCAG Contrast Checker

Pick a text and background color to see the contrast ratio and which WCAG levels it passes.

Use the controls above to provide your input or choose options, then review the result on the page.

Why use our WCAG Contrast Checker

• Checks the contrast ratio between two colors against all WCAG AA and AAA requirements.
• Complete the task with a focused WCAG Contrast Checker workflow instead of switching between apps.
• Open it in your browser and get started—no account or installation required.