颜色对比度WCAG检测器

按WCAG 2.0官方公式计算前景色与背景色的对比度，自动判断是否达到AA/AAA无障碍标准。

免费在线工具

Loading…

使用说明

在“前景色（文字）”输入框填写文字颜色，支持 #hex（如 #333333、#333）或 rgb()/rgba() 语法，也可以直接点击左侧的取色器选色。
在“背景色”输入框用同样方式填写背景颜色。
下方“预览效果”区域会实时用真实颜色渲染示例文字，直观查看视觉效果。
“对比度结果”区展示按 WCAG 2.0 官方公式算出的精确对比度比值，以及是否达到 AA 正常文字(≥4.5:1)、AA 大字体(≥3:1)、AAA 正常文字(≥7:1)、AAA 大字体(≥4.5:1) 四项标准，未达标的会标红提示。
可点击“交换前景/背景”快速对调两个颜色，或点击“加载示例数据”查看示例效果。

严格按 WCAG 2.0 官方公式计算：先将 sRGB 通道值归一化到 0-1，再做 gamma 校正（≤0.03928 时除以 12.92，否则按 ((c+0.055)/1.055)^2.4 计算），最后按 0.2126R + 0.7152G + 0.0722B 加权得到相对亮度。
对比度比值按 (L1+0.05)/(L2+0.05) 计算，其中 L1 为较亮颜色的相对亮度，确保比值恒大于等于 1。
同时给出 AA（正常文字 4.5:1 / 大字体 3:1）与 AAA（正常文字 7:1 / 大字体 4.5:1）两档标准的通过情况，逐项标注通过或不达标。
支持 #hex（3位/6位简写）与 rgb()/rgba() 两种颜色输入格式，两个输入框均可通过取色器直接选色。

网页文字可读性自检

在正式发布前检查正文、按钮、链接等文字与背景的对比度是否满足无障碍标准，避免视觉障碍用户难以阅读。

设计系统配色规范制定

为设计系统里的文字色、背景色组合逐一验证对比度，筛选出符合 WCAG AA/AAA 的安全配色方案。

无障碍合规审计

政府、教育、金融等对无障碍有合规要求的网站，用锚点级精确公式验证页面配色是否达标。

深色模式适配检查

切换深色/浅色主题的文字与背景组合分别检测，确保两套主题下都有足够的可读性对比度。

对比度比值是怎么算出来的？

工具严格按 WCAG 2.0 官方公式计算相对亮度并求比值，纯黑 #000000 与纯白 #FFFFFF 的对比度精确为 21:1，同色对比度精确为 1:1，可作为验证公式正确性的锚点。

AA 和 AAA 标准有什么区别？

AA 是 WCAG 的基础可访问性标准，要求正常文字对比度≥4.5:1、大字体≥3:1；AAA 是更严格的增强标准，要求正常文字≥7:1、大字体≥4.5:1，AAA 更适合对可读性要求极高的场景。

什么算“大字体”？

WCAG 定义大字体为字号至少 18pt（约24px）的常规文字，或至少 14pt（约18.66px）的加粗文字，大字体的对比度门槛相对更低。

支持哪些颜色输入格式？

支持 #RRGGBB、#RGB 简写形式的十六进制颜色，以及 rgb(r,g,b)、rgba(r,g,b,a) 语法（alpha 通道会被忽略，仅取 RGB 值参与计算），格式错误会有提示。