🎨 Contrast Ratio Checker

Verify the WCAG contrast ratio between text and background in real time to keep copy readable for designers and developers.

📐 计算公式 / 原理

CR = (Llight + 0.05) / (Ldark + 0.05)，L = Σ(wᵢ·Cᵢ)，w = [0.2126, 0.7152, 0.0722]

依据 WCAG 2.1 计算前景色与背景色的对比度比值：相对亮度按 sRGB gamma 校正后加权求得；用于保证正文、按钮与图标在网页上的可读性。

前景色（文字）

背景色

🎨 常用配色

21.00 : 1

无障碍评级

1:1 3:1 4.5:1 7:1 21:1

✅

AA 正常文字

≥ 4.5 : 1

通过

✅

AA 大文字

≥ 3 : 1

通过

✅

AAA 正常文字

≥ 7 : 1

通过

✅

AAA 大文字

≥ 4.5 : 1

通过

这是一段正常大小的示例文字，用于展示当前前景色在背景色上的可读性效果。The quick brown fox jumps over the lazy dog.

大文字示例 24px Bold

小号辅助文字 12px — 小字在低对比度下更容易难以辨认，需要更高的对比度来保证可读性。

📚 深度解析：对比度检查器

💡 常见使用场景

复核正文可读性。

核查图标与底色。

无障碍走查。

灰字白底核查

输入：前景 #6B7280、背景 #FFFFFF。处理：算对比度。输出：约 4.5:1，普通文本 AA 临界通过。

❓ 常见问题（FAQ）

临界 4.5 安全吗？

刚好达标；低视力用户仍吃力，建议略高于阈值。结果以浏览器实时计算为准，纯前端本地处理、数据不上传；生成的样式与代码仅作快速产出参考，正式项目请以设计系统、规范与浏览器实测为准。

两种色对比度不够会提示吗？

会按 WCAG 算出对比度值与等级，未达标会标红提醒，便于及时换色或调深。

会保存或上传我的内容吗？

结果以浏览器实时计算为准，纯前端本地处理、数据不上传；生成的样式与代码仅作快速产出参考，正式项目请以设计系统、规范与浏览器实测为准。

🎨 Contrast Ratio Checker

🎨 常用配色

📌 WCAG 对比度标准

🎯 使用场景

📚 深度解析：对比度检查器

💡 常见使用场景

❓ 常见问题（FAQ）

对比度检查器

🎨 Contrast Ratio Checker

🎨 常用配色

🔗 相关工具

📌 WCAG 对比度标准

🎯 使用场景

📚 深度解析：对比度检查器

💡 常见使用场景

❓ 常见问题（FAQ）