Color Contrast Checker
Check WCAG contrast between two colors — AA/AAA verdicts for normal and large text.
Best for: Use it any time a color contrast checker would help: contrast checker, wcag contrast, color contrast ratio, quick comparisons, or a sanity check.
Purpose: Check WCAG contrast between two colors — AA/AAA verdicts for normal and large text.
Input
Preview: the quick brown fox jumps over the lazy dog.
Small text preview at 12px for a realistic check.
How it's calculated & sources
Method: WCAG 2.x relative-luminance contrast. Thresholds — AA: 4.5:1 normal text, 3:1 large text (≥24px, or ≥18.66px bold). AAA: 7:1 normal, 4.5:1 large.
Free & no sign-up · runs entirely in your browser. Results are estimates for general information, not professional advice — verify important decisions with a qualified expert. Last reviewed June 2026.
How it works
ratio = (L₁ + 0.05) / (L₂ + 0.05)
L is WCAG relative luminance: 0.2126R + 0.7152G + 0.0722B after gamma linearization. Ratios run from 1:1 (identical) to 21:1 (black on white).
Example
#51536C text on a #F7F8FF background has a ratio of 7.07:1 — passing AA and AAA for normal text.
Frequently asked questions
What counts as large text?+
24px and up, or 18.66px and up if bold. Large text only needs 3:1 (AA) or 4.5:1 (AAA).
Does this work for gradients or images?+
No — WCAG ratios are defined between two solid colors. For text on gradients or photos, test against the lightest and darkest area behind the text.
AA or AAA — which should I target?+
AA is the accepted legal/industry baseline. AAA is stricter and ideal for body text, but not always practical for decorative UI.
Continue your journey
Where people usually head next.