Color contrast checker. WCAG AA and AAA.
Enter foreground and background colors. Get the contrast ratio, WCAG AA and AAA pass/fail verdicts for normal text, large text, and UI components, with a live swatch preview.
Foreground + background.
Ratio + verdicts.
Contrast is luminance math.
WCAG contrast is a ratio between the relative luminance of two colors, computed per the published sRGB formula. Ratios range from 1:1 (identical colors) to 21:1 (pure black on pure white). The thresholds are 4.5:1 for normal body text at level AA, 3:1 for large text and UI components, and 7:1 for AAA normal text. These thresholds map to empirical research on users with 20/40 vision and below; below 4.5:1, body copy becomes unreliable for a meaningful slice of the audience.
Three common failure modes. First, muted pastel brand primaries on white — most sage greens, dusty rose, and warm grays sit at 3:1 to 4:1 and fail body copy. Second, amber/orange on white — warm colors have low luminance contrast despite looking bright. Third, gray-on-gray UI hierarchies — text-gray-400 on bg-gray-50 often measures 3.2:1 and fails AA.
The fix is a tonal system, not a color swap. Keep the brand color for brand moments; define a darker "text-safe" variant for body copy. Every mature design system — Tailwind's palette, Material 3, IBM Carbon — ships with a named text-on-brand variant that clears AA.
Tools in the same cluster: Website Audit for the full Lighthouse accessibility score. Heading Outliner for the heading-order compliance check.
Five answers.
What is a WCAG-compliant contrast ratio?
WCAG 2.1 level AA requires 4.5:1 for normal text and 3:1 for large text (18pt regular or 14pt bold and up) and for non-text UI components (icons, form borders). Level AAA raises normal text to 7:1 and large text to 4.5:1. Most DTC brands target AA as the floor and AAA where feasible. Below 4.5:1 on body copy, users with moderate low vision or sun glare on mobile screens cannot read reliably.
What counts as 'large text' for the 3:1 threshold?
Large text per WCAG is 18 point or 14 point bold and above, measured in CSS pixels roughly as 24px and 18.66px. In practice that means display headlines, hero titles, and any bold subheading at 19px and up qualifies. Body paragraphs at 16 to 18px regular weight do not. When in doubt, use the stricter 4.5:1 threshold for all text.
Does the 3:1 threshold apply to every UI element?
It applies to UI components that convey meaning through color: form-field borders against page background, icons, focus outlines, chart colors, and state indicators (active vs. inactive tab). Decorative elements (a background pattern, a divider line that is redundant with white space) are exempt. Anything that a user needs to perceive to operate the interface must clear 3:1 against its adjacent color.
Why is my brand color failing contrast?
Most brand primary colors in the 2018-2024 'muted' trend (sage greens, dusty pinks, warm grays) sit near the middle of the luminosity curve and fail the 4.5:1 threshold against both white and black. The fix is a tonal system: keep the brand color for brand moments (hero backgrounds, icons at large size), use a darker or lighter variant for text that needs to pass. Every modern design system does this; the brand book names the text-safe variant explicitly.
Does this tool save my data?
No. Every value you enter lives in memory for this browser tab only. Nothing is transmitted to a server, stored in a database, or synced. Close the tab and the data is gone. The Copy Results button puts a plain-text summary on your clipboard.
Brand color failing AA?
Our UI/UX engagements rebuild brand palettes into token systems with text-safe variants, dark-mode pairs, and WCAG-audited state indicators. Written in 2 weeks, implementation over 4-6.