Color Contrast Checker

WCAG 2.1 Accessibility Compliance Tool — Check contrast ratios instantly

Foreground Color

Background Color

Contrast Ratio
14.75:1
AA Normal Text (≥ 4.5:1)
14.75:1
PASS
AA Large Text (≥ 3:1)
14.75:1
PASS
AAA Normal Text (≥ 7:1)
14.75:1
PASS
AAA Large Text (≥ 4.5:1)
14.75:1
PASS

Live Preview

Large Heading Text (18pt / 24px)
Normal body text at default size (16px). The quick brown fox jumps over the lazy dog.
Small text caption (12px). Used for footnotes and secondary info.

Quick Test Combos

White / Black
White / Navy
White / Blue
Dark / Yellow
White / Red
White / Green
White / Purple
Gray / White
Orange / White
White / Dark Gray

Real-Time Calculation

Contrast ratios update instantly as you pick colors — no page reload needed.

WCAG 2.1 Compliance

Tests against all four WCAG levels: AA and AAA for both normal and large text.

Smart Suggestions

When a combo fails, get the nearest passing color alternatives automatically.

Multi-Format Input

Enter colors in HEX, RGB, or HSL — all formats sync bidirectionally.

Frequently Asked Questions

What is a WCAG contrast ratio?
The WCAG contrast ratio measures the difference in luminance between foreground and background colors. It ranges from 1:1 (no contrast) to 21:1 (maximum contrast, black on white). Higher ratios mean better readability for people with low vision or color vision deficiencies.
What's the difference between AA and AAA?
WCAG AA is the minimum compliance level required for most websites and legal accessibility standards. AAA is the enhanced, highest level. AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text.
What counts as "large text"?
WCAG defines large text as 18pt (24px) or larger, or 14pt (18.66px) bold or larger. Large text has lower contrast requirements because the increased size or weight compensates for reduced contrast, maintaining readability.

Get Accessibility Tips

Receive weekly web accessibility best practices and contrast tips in your inbox.