Color tools

Contrast Checker

Check WCAG contrast ratios between any two colors. See pass/fail badges for AA and AAA at normal and large text sizes, with a live preview.

Foreground (text)

Background

Large heading example

This is normal-size body text — the line you'd read for paragraphs and form copy.

This is small print — captions, footnotes, helper text.

Contrast ratio

WCAG AA — Normal --

WCAG AA — Large --

WCAG AAA — Normal --

WCAG AAA — Large --

What is contrast ratio?

Contrast ratio is a number from 1:1 (no contrast) to 21:1 (pure black on pure white) that describes how distinguishable a foreground color is from its background. The Web Content Accessibility Guidelines (WCAG) use this number as the legal benchmark for whether text is readable by people with low vision, color-blindness, or by anyone reading on a glare-affected screen. The higher the ratio, the safer the choice — and the more universally readable your interface.

How to use this checker

Pick your text color in the foreground picker and the surface behind it in the background picker — or paste hex codes directly. The live preview repaints in real time so you can see exactly what users will see, and the four badges tell you which WCAG levels you pass at a glance. Use the Swap button to invert the pair when you're sketching a dark-mode variant or testing inverted call-to-action buttons.

Best practices

Aim for AA Normal (4.5:1) on body copy as the absolute minimum, and target AAA Normal (7:1) when accessibility is a brand value. Don't chase the bare minimum — borderline ratios fail on cheap monitors and outdoors. Test your actual colors at the actual size you'll ship, not approximations from a brand swatch. Remember that disabled states, placeholder text, and ad copy still count as text — they need contrast too. Never use color alone to convey meaning; pair it with icons, underlines, or labels.

The math behind the ratio

WCAG calculates contrast from relative luminance, not from raw RGB values. Each channel is first linearized from sRGB — values below 0.03928 are divided by 12.92, the rest go through ((c + 0.055) / 1.055)^2.4. Luminance is then L = 0.2126·R + 0.7152·G + 0.0722·B, weighted because the human eye is most sensitive to green and least to blue. The ratio is (L_lighter + 0.05) / (L_darker + 0.05). The + 0.05 term models reflected ambient light on real screens and is what caps the maximum at 21:1.

WCAG conformance levels at a glance

AA Normal: 4.5:1 minimum for body text under 18pt (or 14pt bold). AA Large: 3:1 for text 18pt+ (or 14pt+ bold). AAA Normal: 7:1 — the enhanced level recommended for sites that aim for the highest readability standard. AAA Large: 4.5:1 — large text under the enhanced bar. Non-text UI components (icons, focus rings, form borders) need at least 3:1 against their adjacent surface to satisfy WCAG 2.1 SC 1.4.11.

Frequently asked questions

What does "large text" mean in WCAG?

Large text is anything 18pt and up, or 14pt and up if it's bold — roughly 24px and 18.66px in CSS pixels. The reasoning: bigger letterforms have thicker strokes and more visual mass, so they remain legible at lower contrast than tightly spaced body copy. If your design system mixes regular and bold weights at the same size, evaluate them separately.

Does this tool send my colors to a server?

No. Every contrast calculation runs in your browser through standard JavaScript math — no network request fires when you change the inputs. You can confirm by opening DevTools → Network and dragging the picker. Brand-color audits are safe to run here on unreleased palettes.

Why do my colors fail at 4.49:1 but pass at 4.50:1?

WCAG defines its thresholds as inclusive minimums — 4.5:1 means at least 4.5, not strictly greater. We round to two decimals for display but compare the full-precision number internally, so a 4.4998 result fails by a tiny margin even though the badge reads 4.50. If you're that close, nudge a channel by one or two points to clear the bar safely.

What about non-text elements like icons or form borders?

WCAG 2.1 SC 1.4.11 requires 3:1 minimum contrast for graphical UI components — icon strokes, input borders, focus indicators, button outlines. Use this checker on the icon's foreground color against its surface; if the icon is multi-color, evaluate the most-contrasting stroke that conveys meaning.

Does AAA actually matter for typical websites?

AA is the legal floor in most jurisdictions. AAA is aspirational and not always possible to maintain across an entire palette without sacrificing brand identity. Hit AAA on body copy whenever you can — that's where the readability dividend is biggest — and accept AA on accent hovers and large headings.

Are color names like "red" or "blue" supported?

The pickers and hex inputs handle 6-digit and 3-digit hex codes. For named CSS colors, use our Named Colors tool to look up the equivalent hex first, then paste it here.

Contrast Checker