如何检查颜色对比度以确保无障碍

大约每12个男性中有1个、每200个女性中有1个有某种形式的色觉缺陷。还有数百万人有视力低下、老化的眼睛,或在明亮阳光下查看屏幕。如果您的文本与其背景没有足够的对比度,这些人就无法阅读它。色彩对比不仅仅是锦上添花,它是核心的无障碍要求。基于浏览器的对比度检查器在本地处理整个工作,而无需将任何颜色或数据上传到服务器。

WCAG要求什么

Web内容无障碍指南(WCAG)定义了文本与其背景之间的最低对比度:

「大文本」指18px粗体或24px常规及以上。对比度从1:1(无对比度,白底白字)到21:1(最大对比度,白底黑字)不等。

如何检查对比度

1. 选择您的颜色:使用HEX代码、RGB值或颜色选择器输入前景(文本)和背景颜色。
2. 检查结果:工具立即显示对比度比率,并指示您的组合是否通过普通和大文本的WCAG AA和AAA。
3. 必要时调整:如果对比度失败,请使文本变暗或背景变亮(或反之),直到您通过所需级别。

色彩对比标准的简史

在WCAG之前,Web无障碍是一系列特定于供应商的规则的拼凑。W3C于1999年发布了WCAG 1.0,提供了对比度指导但没有特定比率。WCAG 2.0(2008)引入了基于Lillian Yetenekian博士和IBM研究实验室的颜色科学的4.5:1 / 7:1公式,并得到了低视力研究人员的输入。该公式设计为让视力20/40(轻度低视力)的人能阅读符合AA的文本,让视力20/80(显著低视力)的人能阅读符合AAA的文本。

WCAG 2.1(2018)添加了UI组件(非文本3:1)、图形对象和焦点指示符的对比度要求。WCAG 2.2(2023)添加了围绕目标大小和焦点可见性的更多要求。

当前的WCAG 3.0工作草案提出了一种新的对比度公式(APCA,可访问感知对比度算法),它更好地匹配人类感知,特别是对于较暗的文本。APCA尚未成为W3C建议,但已经被一些工具作为预览支持。

WCAG的法律采用一直很稳定:

• 美国:康复法案第508节(联邦)和ADA判例法要求WCAG 2.0 / 2.1 AA
• 欧盟:Web无障碍指令(2016/2102)和欧洲无障碍法案(2025)要求EN 301 549,即WCAG 2.1 AA
• 英国:公共部门机构无障碍法规要求WCAG 2.1 AA
• 加拿大:联邦部门的ACA(加拿大无障碍法),企业的AODA(安大略省)
• 澳大利亚:DDA判例法将WCAG 2.1 AA视为标准
• 日本:JIS X 8341-3:2016(基于WCAG 2.0)

对于大多数面向公众的网站,WCAG 2.1 AA是事实上的法律最低标准。

对比度如何计算

对比度是使用每种颜色的相对亮度计算的:

1. 将每种颜色从sRGB转换为线性RGB(伽马校正)
2. 计算相对亮度:L = 0.2126 R + 0.7152 G + 0.0722 B
3. 对比度 =(L_较亮 + 0.05)/(L_较暗 + 0.05)

结果是从1(无对比度)到21(最大对比度)的数字。0.05的偏移防止除以零,并稍微模拟环境光对感知对比度的贡献。

该公式被故意设计为确定性和可计算的,因此相同的颜色总是产生相同的比率。它不考虑:

• 色盲:红/绿对可能具有7:1的比率,但对红/绿色盲患者来说是不可见的
• 超出粗体的字体粗细:超细或细线字体需要更高的对比度
• 抗锯齿伪影:非常细的笔画可能看起来比颜色值所暗示的更亮
• 背景图案:文本后面的渐变、图像或噪声会降低有效对比度

这就是为什么WCAG检查是必要但不充分的。与多样化用户(包括色盲用户)的视觉审查捕获其余的问题。

常见的对比度错误

白底浅灰色文本:#999999在#ffffff上的比率只有2.8:1。这未通过WCAG AA。对于视力完美的设计师来说,它可能看起来「干净」,但对于许多人来说是无法阅读的。

彩色背景上的彩色文本:带白色文本的蓝色按钮通常通过,但带白色文本的绿色按钮可能不通过。始终检查,您无法用肉眼判断对比度。

占位符文本:表单字段占位符出了名的低对比度。虽然WCAG并不严格要求占位符达到对比度比率,但用户仍然需要阅读它们。

深色模式:设计师经常在深灰色背景上使用中等灰色文本以获得「微妙」的外观。这经常未通过对比度检查。

图像上的文本:放置在英雄图像上的文本在图像较暗时通常通过,在图像较亮时通常失败。在图像上的文本后面使用深色/浅色渐变叠加或纯色背景。

品牌颜色变化:企业身份通常规定一种主要品牌颜色。如果该颜色作为正文文本失败,请将其用于标题(大文本,3:1阈值),并使用较暗的色调作为正文。

链接颜色:链接必须与周围的文本可区分。WCAG要求链接和正文文本之间的比率为3:1,加上另一个视觉提示(下划线、粗体或图标)。

焦点指示符:聚焦按钮或链接周围的轮廓必须满足相对于其背景的3:1对比度。浏览器默认焦点环通常是安全的;自定义焦点样式经常失败。

常见陷阱

• 仅测试标题:必须检查页面上每种文本大小和粗细组合的对比度。正文、说明、标签、按钮、图标和表单字段都需要检查。
• 忘记悬停和激活状态:默认通过对比度的链接可能在悬停(颜色变浅)或激活(背景不同)时失败。检查所有状态。
• 忽略禁用状态:WCAG明确将禁用状态排除在对比度要求之外,但可访问的设计仍然旨在某种可见的区别。
• 半透明叠加:50%透明的深色叠加上的文本的行为类似于其有效颜色,而不是输入颜色。在检查之前组合有效颜色。
• 抗锯齿的细文本:12px Inter Thin在8.5:1比率下仍然难以阅读。使用实际渲染的字体进行检查,而不仅仅是颜色值。
• HSL转换漂移:在HSL空间中调整颜色可以产生看起来相似但对比度失败的值。颜色调整后始终重新检查。
• 利益相关者锁定的品牌颜色:当品牌颜色无法更改时,请战略性地使用它(仅大文本),并为正文选择不同的颜色。为利益相关者记录原因。
• 忘记打印对比度:网站可能在屏幕上通过对比度,但在以灰度打印时失败。测试用于打印的文档的打印输出。
• 视频上的文本:视频背景不断变化。要么固定静态帧,添加渐变叠加,要么使用纯色背景。
• 国际化改变字符密度:中文、日语、韩语字符比拉丁字符更密集。在英语中阅读良好的4.5:1比率可能会让CJK语言的读者在相同大小下感到吃力。对国际文本提高到7:1。

超越WCAG:APCA和现代感知对比

可访问感知对比度算法(APCA)是Andrew Somers为WCAG 3.0提出的较新公式。与WCAG 2公式不同,APCA:

• 在对比度评分中考虑字体粗细和大小:较细或较小的字体需要更多对比度
• 使用非线性感知缩放:匹配人类视觉实际上如何对亮度做出反应
• 更好地处理深色背景:WCAG 2过度评估了深色背景上的对比度;APCA对此进行了纠正
• 产生极性感知评分:浅色背景上的深色文本为正,反之为负

APCA评分大致在-108到+108之间。60分(正或负)大约相当于WCAG 2的4.5:1。APCA尚未在任何地方被法律要求,但正在被Material Design和IBM Carbon等设计系统采用作为面向未来的标准。

对于今天大多数实际用途,WCAG 2.1 AA(4.5:1 / 3:1)仍然是法律和行业标准。一些团队并行使用APCA作为质量检查。

工具和集成

在CI中至少集成一个自动化工具,以便对比度失败不能未被检测到地发布。

提示

• 检查每个文本/背景组合:不要假设。即使是经验丰富的设计师也会对哪些组合失败感到惊讶。
• 测试两种主题:如果您的网站有浅色和深色模式,请在两者中检查对比度。在白色上工作的颜色可能在深灰色上失败。
• 明智地使用您的品牌颜色:如果您的品牌蓝色作为文本颜色失败,请将其用于较大的元素(按钮、标题),其中适用大文本阈值(3:1),并使用较暗的色调作为正文。
• 不要仅依赖颜色:除了足够的对比度外,切勿仅通过颜色传达信息。使用图标、文本标签或图案与颜色一起,以确保每个人都能理解内容。
• 用模拟器测试:色盲模拟器显示您的设计对患有红色盲、绿色盲或蓝色盲的用户来说是什么样的。常见的对(红/绿)经常失败。
• 在阳光下测试:在晴天把您的手机带到外面。勉强通过WCAG的文本在直射阳光下可能变得无法阅读。AAA对比度(7:1)是户外可见性的实际最低限度。
• 保存无障碍色板:构建一个调色板,其中每种文本颜色都对每种背景颜色通过。前期约束,稍后没有对比度惊喜。
• 教育利益相关者:要求低对比度品牌色的利益相关者在通过低视力模拟器看到设计时通常会改变主意。

隐私和设计数据

颜色对比度检查器完全在您的浏览器中运行。您输入的颜色和值、计算和对比度结果都保留在您的设备上。没有任何内容上传到服务器、记录或与任何人共享。

这对单个颜色(它们不是秘密)不那么重要,对批量检查或设计系统工作更重要,在那里您可能会粘贴完整的品牌调色板、内部产品模型颜色或未发布的产品UI规范。云对比度工具在其请求日志中记录每次粘贴,有时为「服务改进」保留它们,可能会泄漏未发布的品牌颜色或UI设计。基于浏览器的检查器没有任何暴露:颜色永远不会离开您的机器。

基于浏览器的对比度检查在页面加载后也可以离线工作,对于在飞机上、在没有互联网访问的安全环境中,或在任何您不能或不应将设计数据与第三方服务共享的地方进行设计审查很有用。