← UserToolbox
🎨 Contrast Checker

Color Contrast Checker

WCAG 2.1 AA/AAA contrast ratio, calculated live in your browser.

Contrast ratio
21.00:1

Large text preview (24px bold)

Normal text preview — the quick brown fox jumps over the lazy dog.

Why Contrast Ratio Matters

Low-contrast text — light gray on white, pastel on pastel — looks stylish in a mockup but is genuinely hard to read for a huge share of real users: anyone with low vision or color blindness, anyone on an older or dim screen, anyone outdoors in bright sunlight. WCAG 2.1 defines objective, testable minimum contrast ratios so "readable" isn't just a matter of opinion — and meeting them (AA level) is also a common legal accessibility requirement for public-facing websites.

How to Use This Tool

Pick or type your text color and background color as hex codes. The ratio updates instantly, along with pass/fail badges for AA and AAA at both normal and large text sizes, and a live preview so you can actually see how the combination reads. Everything runs locally in JavaScript — no upload, no tracking, works even offline once the page has loaded.

颜色对比度检查工具

选择或输入文字颜色与背景颜色，即可实时计算符合 WCAG 2.1 标准的对比度，并显示 AA/AAA 等级是否达标，附带效果预览。所有计算都在浏览器本地完成，无需上传，保护隐私。

Frequently Asked Questions

What is a good contrast ratio?▼
WCAG 2.1 requires at least 4.5:1 for normal text to meet the AA standard, or 3:1 for large text (18pt+/24px+, or 14pt+/19px+ bold). For the stricter AAA standard, normal text needs 7:1 and large text needs 4.5:1.
How is the contrast ratio calculated?▼
This tool uses the official WCAG 2.1 formula: it converts each color to relative luminance (a linearized, weighted sum of the red, green and blue channels), then computes the ratio (L1 + 0.05) / (L2 + 0.05) using the lighter and darker luminance values. The result ranges from 1:1 (identical colors) to 21:1 (pure black on pure white).
Does this tool store or upload my colors?▼
No. All calculations happen instantly in your browser with plain JavaScript. Nothing is sent to any server.
What counts as "large text" for WCAG?▼
18pt (24px) or larger regular text, or 14pt (18.66px) or larger bold text. Large text gets a lower contrast requirement because bigger, bolder strokes are easier to read at lower contrast.
Why does accessibility contrast matter?▼
Low-contrast text is hard to read for users with low vision, color blindness, or anyone using a phone in bright sunlight. Meeting WCAG AA contrast is also a common legal/compliance requirement (e.g. ADA, EN 301 549) for websites and apps.