What contrast ratio do I need for WCAG AA?

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

AAA is stricter: 7:1 for normal text and 4.5:1 for large text.

Why does accessibility contrast matter?

Sufficient contrast makes text readable for users with low vision or color vision deficiencies, and is required for WCAG-compliant websites.

Color Contrast Checker

Check WCAG contrast ratio between text and background colors.

This tool runs entirely in your browser. Your files are never uploaded to a server.

Foreground (text)

Background

Sample text preview

17.74:1

Contrast ratio

Pass

AA — normal text

Pass

AA — large text

Pass

AAA — normal text

Pass

AAA — large text

Enter foreground and background colors as three- or six-digit HEX values to calculate their relative-luminance contrast ratio and preview the pair. The tool reports AA normal at 4.5:1, AA large at 3:1, AAA normal at 7:1 and AAA large at 4.5:1. It evaluates only the two opaque sRGB colors entered: font size and weight, transparency, gradients, images, interaction states and surrounding UI are not inspected. Use the pass/fail result as one accessibility check rather than a complete WCAG audit; calculation stays in your browser.

Frequently Asked Questions

What contrast ratio do I need for WCAG AA?: At least 4.5:1 for normal text, or 3:1 for large text (18pt+ or 14pt+ bold).
What about WCAG AAA?: AAA is stricter: 7:1 for normal text and 4.5:1 for large text.
Why does accessibility contrast matter?: Sufficient contrast makes text readable for users with low vision or color vision deficiencies, and is required for WCAG-compliant websites.

Color Name Finder

Find the closest named color match for any hex code.

CMYK Color Converter

Convert any hex or RGB color to CMYK for print.

Gradient CSS Generator

Create a two-color CSS gradient and copy the code instantly.

Frequently Asked Questions

Related Tools