Free WCAG Contrast Checker — AA / AAA Rating + Sample Preview

Foreground/background colors → WCAG contrast ratio + AA/AAA rating + sample text preview.

WCAG Contrast Checker computes the contrast ratio between two colors and reports whether they pass [WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) accessibility standards for body text and UI elements. Essential for designers, frontend engineers, and accessibility auditors who need to confirm their color palette is usable by people with low vision.

Five tiers are checked at once: AAA normal text (≥7:1), AAA large text (≥4.5:1), AA normal text (≥4.5:1), AA large text (≥3:1), and UI components (≥3:1). Each tier shows a clear pass/fail. A live preview renders sample text at 5 typographic sizes so you can see whether the contrast is actually readable — not just mathematically passing.

Free, no signup, browser-side. Colors stay in your tab — no design tokens sent anywhere. Use during design system audits, theme creation, or when defending against accessibility complaints.

Key features

WCAG 2.1 ratio calculation — Uses the official formula: (L1 + 0.05) / (L2 + 0.05) where L1 and L2 are the relative luminances of the lighter and darker colors. Identical to what Lighthouse and axe use.
5 compliance tiers tested — AAA normal · AAA large · AA normal · AA large · UI components. All checked at once with pass/fail indicators.
Sample text preview — Renders your colors with sample text at 11pt, 14pt regular, 14pt bold, 18pt regular, and 24pt bold — so you can SEE whether the contrast is good, not just trust the math.
Color picker + hex input — Native HTML5 color picker for visual selection, plus hex text input for exact values from your design tokens.
Swap colors — One-click swap foreground ↔ background — useful when checking text-on-button vs button-on-page contrast.
Browser-side only — Colors and ratios stay in your tab. No upload, no tracking.

How to use

Step 1: Pick foreground (text) color — Click the swatch to use a color picker, or type a hex value (e.g., #1a202c). Both 3-digit (#000) and 6-digit (#000000) hex work.
Step 2: Pick background color — Same as above. Common cases: white background + dark text, or brand color + white text.
Step 3: Read the ratio — Big number in the result panel — e.g., 13.94:1. Higher = more contrast.
Step 4: Check the pass/fail table — Five tiers shown. Aim for AA normal text (4.5:1) minimum for body text. AAA (7:1) is gold standard for high-accessibility sites.
Step 5: Verify with the preview — Sample text at 5 sizes shows actual readability. If a passing tier still looks hard to read, increase contrast.

When to use

Design system audit — verify every text+background combo in your brand colors passes AA
Theme creation — confirm dark mode text contrast is high enough
Form input fields — placeholder text and label contrast (often forgotten)
Button states — disabled buttons sometimes have border contrast that fails 3:1
Marketing copy on hero images — ensure white text on a busy gradient still reads
Accessibility compliance review — pre-Lighthouse / pre-axe spot-check before running full audit
WCAG 2.2 evidence pack — screenshot the result for ADA compliance documentation

Frequently asked questions

What's the difference between AA and AAA?

AA is the baseline accessibility level required for most public-facing sites (WCAG 2.1). AAA is the highest standard — required for some government contexts and recommended for any text that's critical to safety, health, or legal compliance. AAA requires 7:1 contrast for normal text vs AA's 4.5:1.

What counts as 'large text'?

WCAG defines large text as ≥18pt (24px) regular weight OR ≥14pt (~18.66px) bold. Below that = normal text. Large text has lower contrast requirements (3:1 AA, 4.5:1 AAA) because the letterforms are inherently more visible.

Does this work for non-text UI like icons?

Yes — the 'UI components' tier (3:1) is the WCAG 1.4.11 standard for non-text elements: button borders, focus rings, form field borders, chart elements. These need 3:1 against their immediate background.

What about colors with transparency / alpha channels?

v1 doesn't support alpha. Workaround: pre-multiply alpha against the background and use the resulting opaque hex. E.g., #000 at 60% alpha on white = #666. Native alpha support is on the roadmap.

Why don't gradients work?

Gradients have varying contrast across positions — text might pass at one spot and fail at another. Best practice: check contrast against the LEAST contrasting point of the gradient. The tool can only check static color pairs.

Is APCA / WCAG 3 supported?

Not yet — WCAG 3 (APCA algorithm) is still draft and not adopted as a legal standard. WCAG 2.1 (used here) is the current binding standard for ADA, EAA, and most regulations. APCA support is on the roadmap once it stabilizes.

My ratio is 4.49:1 — is that AA?

No — WCAG is strict. 4.49:1 fails 4.5:1 minimum (AA normal text). Bump the contrast by darkening foreground or lightening background. Even 0.1 ratio difference matters legally.

What about color blindness?

WCAG contrast doesn't directly test for color blindness — it tests luminance. Most color-blind users can still read text that passes WCAG because the luminance difference is preserved across color-blind simulations. For deeper color-blind testing, use the Coblis simulator.

Related tools

Color Converter

Convert between HEX, RGB, HSL, HSV with live preview + WCAG contrast check.

Color Palette Extractor

Extract dominant colors from any image with median-cut quantization. Hex + RGB output, CSS array export. Browser-side.

CSS Gradient Generator

Build linear, radial, or conic CSS gradients with live preview. Multi-stop, angle slider, Tailwind v4 ready.

Pass	AAA normal text	≥7:1 — highest standard, body text 14pt+ regular
Pass	AAA large text	≥4.5:1 — large text (18pt+ regular or 14pt+ bold)
Pass	AA normal text	≥4.5:1 — minimum for body text
Pass	AA large text	≥3:1 — large text only
Pass	UI components	≥3:1 — non-text UI elements (buttons, form borders)