Built-in toolFree · No signup

Color Contrast Checker

Check foreground/background colour pairs against WCAG 2.1 AA (4.5:1) and AAA (7:1) standards. See the contrast ratio instantly, preview real text at multiple sizes, and auto-fix failing pairs with one click.

Share on X LinkedIn

16.27:1

Contrast ratio

AAA

AA✓ Normal (4.5:1)✓ Large (3:1)

AAA✓ Normal (7:1)✓ Large (4.5:1)

Foreground (text)

Background

Text preview

The quick brown fox jumps over the lazy dog.

Normal text — Body copy

The quick brown fox jumps over the lazy dog.

Large text — ≥18pt or ≥14pt bold

The quick brown fox jumps over the lazy dog.

Heading — H1–H3

The quick brown fox jumps over the lazy dog.

UI element — Buttons, labels

WCAG 2.1 Compliance

Level	Normal text	Large text (18pt+)	UI components	Description
WCAG AA	✓ Pass	✓ Pass	✓ Pass	Minimum standard for most text
WCAG AAA	✓ Pass	✓ Pass	✓ Pass	Enhanced — the gold standard

CSS Variables

:root {  --color-foreground: #1A1A18;  --color-background: #F8F7F4;  /* Contrast ratio: 16.27:1 — WCAG AAA */}

Was this tool helpful?

How to use

Pick colours

Use the colour picker or click a palette swatch for foreground and background. Hex input also supported.

Read the ratio

The contrast ratio updates live. Green = AAA pass, yellow = AA only, red = fail.

Auto-fix if failing

Click 'Auto-fix to AA' and the tool adjusts the foreground colour to the nearest WCAG AA-passing value.

Copy CSS variables

Grab the --color-foreground and --color-background CSS variable snippet at the bottom.