Color contrast checker — WCAG AA/AAA

How it works

Three steps, all computed in this tab:

1. Parse both colors. Hex, rgb()/rgba(), and hsl()/hsla() inputs (comma or modern space syntax) and common color names are converted to sRGB channels. Out-of-range values are clamped the way CSS clamps them.
2. Compute relative luminance. Each channel is linearized (the WCAG sRGB formula) and weighted: L = 0.2126 R + 0.7152 G + 0.0722 B. Pure white is 1.0, pure black is 0.
3. Divide for the ratio. (Lighter + 0.05) ÷ (Darker + 0.05), rounded to two decimals, then compared against the WCAG 2.1 thresholds: AA 4.5:1 / AAA 7:1 for normal text, AA 3:1 / AAA 4.5:1 for large text, and 3:1 for UI components and graphics (1.4.11).

Worked example: #767676 (a medium gray) on white has a relative luminance of about 0.18, so the ratio is (1.05) ÷ (0.18 + 0.05) ≈ 4.54:1 — it passes AA for normal text (≥ 4.5) and AAA for large text (≥ 4.5), but falls short of AAA for normal text (needs 7). A lighter gray like #999999 on white is only ≈ 2.85:1 and fails even the large-text threshold (needs 3) — the kind of pair that looks fine on a bright screen but fails an accessibility review.

When do you need a contrast checker?

• Web accessibility compliance. WCAG 2.1 AA text contrast is a requirement for most public sites and a common procurement bar. Checking pairs as you design them is far cheaper than fixing a theme afterwards.
• UI and design QA. Before a release, verify the text-on-button, text-on-panel, and placeholder-text pairs your design system actually ships — not just the ones in the style guide.
• Data visualization and charts. WCAG 1.4.11 needs 3:1 between adjacent graphical elements (lines, chart bars, icon strokes) and their background, which is easy to miss when picking a pretty palette.
• Brand colors on colored backgrounds. Marketing pages often put brand colors on tinted panels. A quick pair check tells you whether the headline still meets AA before the design goes out.

Limits

• One pair at a time: this checker evaluates a single foreground/background pair. Real pages contain text over gradients, images, and partially transparent layers — check the actual rendered pairs, not just the ideal ones.
• Contrast is not the whole story: a passing ratio does not guarantee readable text. Font size, weight, antialiasing, and the reader's vision all matter. Test with real users, including people with color vision deficiency (contrast ratio alone cannot capture hue-based confusion).
• Alpha compositing is an approximation: for translucent colors this tool composites the foreground over the background using the standard "over" operator, flattened onto white — the same approach most checker tools use, but a reasonable model rather than a rendered-pixel measurement.
• sRGB assumption: the math uses the standard sRGB color space of the web. Wide-gamut displays or heavy calibration can make the on-screen appearance differ from the calculated values.

Frequently asked questions

Related tools

• Document Hygiene — inspect and scrub metadata from documents and photos before sharing them.
• Media Optimizer — resize and compress images in your browser with exact output sizes.
• Time Coordinator — find shared meeting windows across time zones, DST-aware.
• Payload Workbench — format and convert JSON, YAML, and Base64 payloads locally.
• RAG Cleaner — clean text and HTML into deterministic Markdown and chunks, browser-local.
• Text Hygiene — inspect invisible Unicode characters and review writing patterns locally.
• Subtitle Converter — convert SRT and VTT subtitle files locally.
• Volumetric Weight Calculator — chargeable weight for courier, air, and sea shipments.
• Passphrase Generator — create strong random passphrases locally from the EFF word list.
• Bingo Card Generator — free printable bingo cards for 75-ball, 90-ball, or word games.
• CBM Calculator — estimate cubic meters for sea freight and LCL shipping.
• Date Calculator — count days and business days between dates, or add and subtract days.