What is the WCAG contrast ratio?

It's a ratio (from 1:1 to 21:1) between the luminance of two colors. WCAG AA requires 4.5:1 for normal text, AAA requires 7:1.

Are AA and AAA standards checked?

Yes, the tool checks both levels for normal text and large text (≥18pt or ≥14pt bold).

Yes, both formats are supported, along with a visual color picker.

🇬🇧WebFileTools/WCAG Contrast Checker

Check contrast ratio between two colors according to WCAG 2.1 (AA/AAA).

Text color

Background color

17.06:1

Contrast ratio

Normal text

(< 18pt / 14pt bold)

AAA

AA ≥ 4.5:1 • AAA ≥ 7:1

Large text

(≥ 18pt / 14pt bold)

AAA

AA ≥ 3:1 • AAA ≥ 4.5:1

The quick brown fox jumps over the lazy dog

This is a preview of normal text at 16px on your selected background.

Small text (14px) is harder to read with low contrast.

The contrast checker calculates the ratio between two colors according to WCAG 2.1 and indicates AA/AAA compliance.

Select or enter your foreground and background colors. The ratio and compliance display in real time.

What is the WCAG contrast ratio?: It's a ratio (from 1:1 to 21:1) between the luminance of two colors. WCAG AA requires 4.5:1 for normal text, AAA requires 7:1.
Are AA and AAA standards checked?: Yes, the tool checks both levels for normal text and large text (≥18pt or ≥14pt bold).
Can I enter HEX and RGB colors?: Yes, both formats are supported, along with a visual color picker.

Convert colors between HEX, RGB, HSL, HSV and more. Real-time color preview. 100% in the browser.

Extract dominant colors from any image. Get a harmonious palette with HEX, RGB, and HSL codes. 100% browser-based, free.

Generate custom placeholder images (PNG or SVG). Configurable dimensions, colors and text.