🎨 颜色对比度检查器
★★★★½ 4.8 (312人评分)
🔒 数据不上传 ✅ 100%免费 ⚡ 实时检测

Loading... Thanks for your rating!

在线WCAG色彩对比度检测 - AA/AAA标准,实时预览,纯前端本地计算

🎨 选择颜色

预览文字 Aa

这是一段示例文字,用于预览前景色和背景色的对比效果。

--
对比度比率

📋 WCAG 2.1 合规性

常见问题

Q1: 什么是WCAG对比度标准?

WCAG(Web内容无障碍指南)规定了文字与背景之间的最低对比度要求。AA级要求普通文字对比度≥4.5:1,大文字≥3:1;AAA级要求普通文字≥7:1,大文字≥4.5:1。这些标准确保视力障碍用户也能正常阅读网页内容。

Q2: 对比度比率是如何计算的?

对比度比率 = (L1 + 0.05) / (L2 + 0.05),其中L1是较亮色的相对亮度,L2是较暗色的相对亮度。相对亮度根据RGB各通道的sRGB值计算。比率范围从1:1(无对比)到21:1(最大对比,黑底白字)。

Q3: 什么是大文字和普通文字?

WCAG定义的大文字为:粗体≥14pt(18.5px)或正常≥18pt(24px)。普通文字是小于以上尺寸的文字。大文字的对比度要求较低,因为大尺寸本身就更容易阅读。

常见问题 (FAQ)

什么是WCAG对比度标准?

WCAG规定文字与背景最低对比度:AA普通文字≥4.5:1,大文字≥3:1;AAA普通文字≥7:1,大文字≥4.5:1。

对比度比率是如何计算的?

比率=(L1+0.05)/(L2+0.05),L1/L2为较亮/暗色的相对亮度。范围1:1到21:1。

什么是大文字和普通文字?

大文字:粗体≥14pt或正常≥18pt。普通文字:小于以上尺寸。大文字对比度要求较低。