WCAG (Web Content Accessibility Guidelines) is the international standard for web accessibility. Level AA (4.5:1 normal text, 3:1 large text) is the legal requirement in many countries. Level AAA (7:1) is the gold standard.

What counts as large text?

Large text is 18pt (24px) or larger, or 14pt (≈18.67px) bold or larger. Large text has a lower contrast requirement (3:1 AA, 4.5:1 AAA).

What color formats are supported?

Hex (#fff, #ffffff), rgb(255, 255, 255), and hsl(0, 0%, 100%). All values are parsed in-browser with no data sent to any server.

Color Contrast Checker

Runs in browser

Check WCAG contrast ratios instantly. AA/AAA pass/fail badges + live preview.

Check WCAG accessibility contrast ratios between foreground and background colors. Live ratio display with AA and AAA pass/fail badges, text preview, and support for hex, rgb(), and hsl() input.

Foreground

Background

Quick colors

Contrast Ratio

13.98:1

AA Normal

≥ 4.5:1

PASS

AA Large

≥ 3:1

PASS

AAA Normal

≥ 7:1

PASS

AAA Large

≥ 4.5:1

PASS

Text Preview

The quick brown fox jumps over the lazy dog

Normal body text at 14px. WCAG requires 4.5:1 for normal text and 3:1 for large text (18px+ or 14px bold).

Small text — hardest to read

🔒 Runs in your browser · No uploads · Your data never leaves your device

How to use

Enter colors
Type hex codes (e.g. #1e293b), rgb() values, or hsl() values for both foreground and background. Use the native color picker for visual selection.
Read the contrast ratio
The ratio (e.g. 8.54:1) updates live. Higher is better. 4.5:1 is the WCAG AA minimum for normal text.
Check WCAG compliance
Review the four badges: AA Normal (≥4.5), AA Large (≥3.0), AAA Normal (≥7.0), AAA Large (≥4.5). PASS = accessible for that context.
Preview text
See how your text actually looks on the background in the live preview panel.

Common use cases

Verifying text accessibility before shipping — Check that foreground/background color pairs meet WCAG AA (4.5:1) before publishing a design to production.
Auditing design system colors — Test all color combinations in your design system to find pairs that fail accessibility requirements.

Examples

White on dark blue
Classic high-contrast pairing: #ffffff on #1e3a5f
Output
```
Contrast ratio: 12.3:1 — AA PASS, AAA PASS
```
Light gray on white
#999999 on #ffffff — common but often fails accessibility
Output
```
Contrast ratio: 2.85:1 — AA FAIL, AAA FAIL
```

Frequently asked questions

What is WCAG?: WCAG (Web Content Accessibility Guidelines) is the international standard for web accessibility. Level AA (4.5:1 normal text, 3:1 large text) is the legal requirement in many countries. Level AAA (7:1) is the gold standard.
What counts as large text?: Large text is 18pt (24px) or larger, or 14pt (≈18.67px) bold or larger. Large text has a lower contrast requirement (3:1 AA, 4.5:1 AAA).
What color formats are supported?: Hex (#fff, #ffffff), rgb(255, 255, 255), and hsl(0, 0%, 100%). All values are parsed in-browser with no data sent to any server.

Key concepts

WCAG: Web Content Accessibility Guidelines — the international standard for web accessibility. AA (4.5:1) is the legal minimum for normal text in many countries.
Contrast ratio: A number from 1:1 (identical colors) to 21:1 (black on white) measuring the luminance difference between two colors.

You might find these useful too.