对比度检查工具(WCAG 标准判定)
输入两种颜色,即可计算 WCAG(Web Content Accessibility Guidelines)对比度,并判定是否符合 AA、AAA 标准。
WCAG 对比度标准一览
| 标准等级 | 适用对象 | 所需对比度 |
|---|---|---|
| AA(最低要求) | 正常文本 | 4.5:1 以上 |
| AA(最低要求) | 大号文本(18pt 以上,或 14pt 以上粗体) | 3:1 以上 |
| AA(最低要求) | UI 组件与图形对象 | 3:1 以上 |
| AAA(更高标准) | 正常文本 | 7:1 以上 |
| AAA(更高标准) | 大号文本 | 4.5:1 以上 |
使用小贴士
- 文字颜色和背景颜色既可以通过取色器选择,也可以直接输入十六进制颜色代码(支持 `#RRGGBB` 和 `#RGB` 两种格式)。
- 点击「交换颜色」按钮可以快速交换文字色与背景色进行对比,在比较多套 Logo 或图标配色方案时非常方便。
- AAA 标准比 AA 标准更严格。一般网站建议至少达到 AA 标准,但对可读性要求特别高的内容,建议以 AAA 标准为目标。
- 按钮边框、图标等「UI 组件与图形对象」的对比度要求(3:1 以上)是 WCAG 2.1 新增的成功标准(1.4.11)。
常见问题
WCAG(Web Content Accessibility Guidelines)是一套国际性指南,旨在让更多人能够顺畅地访问网页内容。对比度是用 1:1(无差异)到 21:1(黑白之间的最大差异)之间的数值,来表示文字颜色与背景颜色在明暗上的差异,常被用作衡量文字在视觉障碍人士、老年用户、以及在室外强光下使用手机等各种条件下可读性的客观指标。
文字越大,形状越容易辨认,因此即使对比度稍低也仍然易读。WCAG 将 18pt(约 24px)以上的常规字体,或 14pt(约 18.66px)以上的粗体字,定义为「大号文本」,并对其采用比正常文本更宽松的标准(AA 标准下 3:1 以上)。
WCAG 2.1 的 AA 标准是许多国家和地区的法律法规或指南(例如美国的 ADA、欧盟的 Web Accessibility Directive 等)所参照的最低达标要求。AAA 标准要求更高,并非强制性的,但在对可读性要求特别高的内容(如公共机构网站)中有时会被推荐采用。
WCAG 2.x 首先会从每种颜色的 sRGB 值中去除伽马校正,计算出「相对亮度(relative luminance)」。然后将较亮颜色的亮度记为 L1,较暗颜色的亮度记为 L2,按照 (L1+0.05)/(L2+0.05) 的公式计算出对比度。该计算方法作为 W3C 的技术规范公开发布。
闲话 ― 无障碍标准诞生的背景
WCAG(Web Content Accessibility Guidelines)是由 W3C(World Wide Web Consortium,万维网联盟)主导制定的国际性指南,其最初版本 WCAG 1.0 发布于 1999 年。早在当时,减少视觉障碍用户借助屏幕阅读器等辅助技术使用网页时所遇到的障碍,就已被视为一项重要课题。
对比度标准之所以受到重视,与人类视觉的多样性密切相关:一定比例的人群存在色觉异常(色弱),例如男性中约每 20 人就有 1 人;随着年龄增长,晶状体发黄会导致对比敏感度下降;此外,在室外强烈日光下手机屏幕也会变得难以看清。设定数值化的标准,使设计师不必仅凭主观的「是否好看」来判断,而能够客观地验证内容的无障碍程度。
如今,网页无障碍在许多国家已成为法律层面的要求(例如日本自 2024 年 4 月起施行的《残疾人歧视消除法》修订案,规定企业必须提供合理便利),检查对比度已经成为企业建设网站时不可回避的基本质量检查项之一。