Skip to main content

color-contrast-checker

A color contrast checker measures the perceived contrast ratio between two colors (typically text and its background) against WCAG accessibility guidelines — AA requires 4.5:1 for normal text and 3:1 for large text (≥18px or ≥14px bold); AAA requires 7:1 normal and 4.5:1 large. Failing contrast is the #1 accessibility violation on the web (per WebAIM annual survey, ~83% of homepage failures). The ZTools Color Contrast Checker computes both the WCAG contrast ratio AND the newer APCA score (WCAG 3 draft), shows a live text preview at multiple sizes, and offers color-blind simulation (Protanopia, Deuteranopia, Tritanopia).

Use cases​

Pre-launch accessibility audit​

Check every color pair in the design system before shipping. Catch violations now, not after a lawsuit or accessibility audit fails.

Marketing landing-page review​

Hero CTAs over photo backgrounds often fail contrast. Verify each color pair against the worst-case underlying color in the photo.

Brand color audit​

Brand uses a specific accent color — does it pass contrast against your background palette? Tool flags pairs that need text-color tweaks.

PDF / print accessibility​

Print designs follow same WCAG guidelines (effectively). Audit before sending to press; reprints are expensive.

How it works​

  1. Pick foreground + background colors — Hex picker, RGB sliders, OKLCH, or paste hex codes.
  2. View ratio — WCAG contrast ratio (e.g. 4.7:1) + AA / AAA pass/fail for normal AND large text.
  3. View APCA score — Newer perception-based score (WCAG 3 draft); -100 to 100. Generally aligns with WCAG but more accurate for thin fonts.
  4. Simulate color blindness — Toggle Protanopia / Deuteranopia / Tritanopia preview — does the contrast still hold for color-blind users?
  5. Suggest fixes — If failing, tool suggests darker / lighter shades that pass.

Examples​

Input: Foreground #6366f1 (indigo-500), background #ffffff

Output: Contrast 4.61:1 — passes AA normal, fails AA large strict, passes AA-large by sub-pixel margin. Use indigo-600 for safer compliance.

Input: Foreground #ffffff, background #ef4444 (red-500)

Output: Contrast 4.10:1 — fails AA (4.5 required). Use red-600 background or larger text.

Input: Foreground #1f2937 (slate-800), background #f3f4f6 (gray-100)

Output: Contrast 12.6:1 — passes AAA. Industry-standard "almost-black on light-gray" body text combination.

Frequently asked questions​

WCAG AA vs AAA — which target?

AA is the legal-compliance baseline (ADA, EN 301 549). AAA is best practice but stricter — many brands can't hit AAA on every component without sacrificing visual hierarchy. Aim for AA everywhere; AAA on body text where possible.

What's "large text" exactly?

WCAG defines large = 18pt+ (24px) at any weight, OR 14pt+ (18.66px) at 700+ weight. Headings often qualify as large.

APCA vs WCAG — which to follow?

WCAG 2.x is the current legal standard. APCA is in WCAG 3 draft and may become the standard in coming years. Comply with WCAG 2.x AA today; cross-reference APCA for thin/decorative fonts where WCAG's formula is too lenient.

Why does color contrast matter for color-blind users?

Red-green contrast that looks fine to most users may be invisible to deuteranopes. WCAG ratio is luminance-based and largely independent of hue, so AA-passing red-on-green also passes for color-blind users — but always verify with simulation.

Does font weight affect required contrast?

Yes — bold text reads at smaller sizes, so WCAG allows large-text contrast (3:1) for 14pt+ bold or 18pt+ regular.

What about text on photos / gradients?

Test against the worst-case underlying color (darkest part if light text, lightest part if dark text). Add a semi-transparent overlay if necessary.

Tips​

  • For body text, target 7:1 (AAA) — buys safety margin against display variation.
  • Test text-over-photo against the worst-case underlying color; add overlay/scrim if needed.
  • Body text + background pair is the highest-leverage check — fix that first.
  • Color-blind preview is mandatory for any color-encoded UI (status badges, charts, "required field" red).
  • Include link/button hover states in audit — only ~30% of teams check hover contrast.

Try it now​

The full color-contrast-checker runs in your browser at https://ztools.zaions.com/color-contrast-checker — no signup, no upload, no data leaves your device.

Open the tool ↗

Last updated: 2026-05-06 · Author: Ahsan Mahmood · Edit this page on GitHub