无需登录 数据私有 本地保存

文字颜色对比度检测器 - WCAG无障碍合规测试

80
0
0
0

常见问题解答

Q1:WCAG 2.1的AA级和AAA级有什么区别?我应该追求哪个等级?

AA级是WCAG定义的中等合规等级,要求普通文字对比度≥4.5:1,大文字≥3:1。AAA级是最高合规等级,要求普通文字≥7:1,大文字≥4.5:1。在实际项目中,AA级是大多数法律法规和行业标准的最低要求,也是绝大多数项目的合理目标。AAA级代表最高可访问性承诺,适合政府机构、教育平台、公共服务类网站等对可访问性有更高要求的项目。WCAG本身不要求整个网站全部达到AAA级,建议将AAA级作为设计目标,在可行的范围内尽量提升对比度。对于商业网站,至少应确保所有文字内容达到AA级标准。

Q2:工具中的"大文字"具体指多大的字号?

根据WCAG 2.1标准,大文字的定义为:字号不小于18pt(约24px)的普通文字,或者字号不小于14pt(约18.66px)的粗体(bold)文字。这两个阈值是同时满足的——只要满足其中一个条件即被视为大文字。在本工具的预览区域中,标题文字示例模拟的是大文字场景,正文和小号文字模拟的是普通文字场景。在实际项目中,请根据您页面中文字的实际字号和字重来判断适用哪一组对比度阈值。

Q3:对比度比率的计算原理是什么?为什么不是简单的颜色亮度差?

WCAG使用的是基于sRGB相对亮度的对比度公式:(L1 + 0.05) / (L2 + 0.05),其中L1是较亮颜色的相对亮度,L2是较暗颜色的相对亮度。相对亮度L通过公式 L = 0.2126 × R + 0.7152 × G + 0.0722 × B 计算,R/G/B为gamma解码后的线性RGB值。公式中的0.05偏移量是为了确保当两种颜色完全相同时比率为1:1而非0:1,同时也使得在极低亮度下的对比度计算更加合理。之所以不使用简单的亮度差,是因为人眼对不同颜色通道的敏感度不同(对绿色最敏感,对蓝色最不敏感),加权系数正是反映了人眼的这一生理特性。这个公式经过了大量可访问性研究的验证,是目前业界公认的最佳对比度度量方式。

Q4:我的网站必须达到WCAG AAA级才能上线吗?

不是。WCAG标准本身并没有要求网站必须达到AAA级才能上线。AAA级被定义为"增强"级别的可访问性目标,适合在条件允许时追求。大多数国家和地区的法律法规(如美国ADA、欧盟EAA、中国GB/T 37668-2019)要求的是A级或AA级。在实际项目中,建议至少确保所有文字内容达到AA级标准,这是国际上最广泛接受的合规基线。对于关键信息(如错误提示、必填项说明、导航文字等),建议尽量达到AAA级以确保最大范围的用户可访问性。达到AAA级是值得追求的目标,但不应因追求AAA级而忽视其他可访问性维度(如键盘导航、屏幕阅读器兼容性等)。

Q5:颜色选择器输入的十六进制颜色值格式有什么要求?

本工具接受标准的十六进制颜色格式,包括3位和6位两种形式。6位格式如 #FF5733,3位简写如 #F53(等同于 #FF5533)。颜色值必须以 # 开头,后跟对应位数的十六进制字符(0-9和A-F,不区分大小写)。工具会自动将3位简写展开为6位格式进行计算。Alpha通道值(如 #FF573380)不在本工具的支持范围内,因为WCAG对比度计算仅基于不透明颜色。如果您的设计中使用了半透明颜色叠加,建议先计算叠加后的实际颜色值,再使用本工具进行检测。

Q6:为什么两种看起来差别很大的颜色,对比度却很低?

这种情况通常发生在使用高亮度但不同色相的颜色时。例如,纯红色(#FF0000)和纯绿色(#00FF00)虽然色相差异很大,但它们的相对亮度非常接近(红色约0.2126,绿色约0.7152),计算出的对比度比率约为2.28:1,远低于AA级要求的4.5:1。这是因为人眼对亮度差异的敏感度远高于对色相差异的敏感度。WCAG的对比度计算正是基于相对亮度而非色相差异,这反映了人眼识别文字的实际机制。在设计配色时,不要仅凭色彩差异感来判断可读性,务必使用本工具进行数值验证。通常来说,一深一浅的颜色搭配更容易获得高对比度。

Q7:工具的检测结果可以用于正式的无障碍审计报告吗?

本工具的对比度计算严格遵循WCAG 2.1标准中的sRGB相对亮度公式,计算结果与W3C官方示例及其他权威无障碍检测工具(如axe、WAVE、Lighthouse)的结果一致,可以作为设计阶段和开发阶段的参考依据。但在正式的无障碍审计报告中,建议使用多种工具进行交叉验证,因为实际项目中可能涉及复杂的CSS样式继承、透明度叠加、背景图片等场景,这些需要结合实际渲染效果进行综合评估。本工具适合用于快速检测纯色文字和背景的对比度,是无障碍工作流程中非常实用的辅助工具。