Contrast Checker

Check WCAG contrast ratio for foreground/background colors. Includes AA/AAA pass/fail + live preview + Show Work.

How to Use

  1. Enter a foreground (text) color and a background color (HEX recommended).
  2. Pick “Normal” or “Large” text to evaluate AA/AAA thresholds.
  3. Use Swap / Presets for quick checks.
  4. Open “Show Work” to see relative luminance and ratio math.
Live Preview
Preview text updates with your colors and chosen text size.
Ratio
—
WCAG
—
FG: — BG: — Size: —
The quick brown fox jumps over the lazy dog.
Buttons, labels, and body text should meet AA at minimum.
AA (Normal)
—
Threshold: 4.5:1
AA (Large)
—
Threshold: 3.0:1
AAA (Normal)
—
Threshold: 7.0:1
AAA (Large)
—
Threshold: 4.5:1
Inputs & Settings
Use HEX (e.g., #111827). RGB/HSL can be pasted; the tool will normalize.
Examples: #000000, #ffffff, #0b1020
Tip: avoid “almost black” + “almost black” combos
Text Size
WCAG large text includes 14pt bold or 18pt regular.
Show Work (step-by-step)
—
Work uses WCAG relative luminance and contrast ratio: (L1 + 0.05) / (L2 + 0.05).

WCAG Contrast Reference

Contrast ratio ranges from 1:1 (no contrast) to 21:1 (black/white).

  • AA (Normal text): 4.5:1
  • AA (Large text): 3.0:1
  • AAA (Normal text): 7.0:1
  • AAA (Large text): 4.5:1
“Large text” typically means 18pt+ regular or 14pt+ bold.

FAQ

Why does contrast matter?

Higher contrast improves readability and accessibility, especially for low vision and bright environments.

Do gradients or images change the result?

Yes. This tool checks solid colors. For images/gradients, test the lightest/darkest effective areas or use multiple samples.

What about disabled text or placeholders?

WCAG still applies to critical information. Placeholders often fail contrast—consider real labels instead.

Tool Info

Last updated:

Updates may include improved parsing (HEX/RGB/HSL), better preview controls, and edge-case handling.