对比度检查工具（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 以上 |
什么是对比度
对比度是用 1:1（无差异）到 21:1（黑白之间的最大差异）之间的数值，来表示文字颜色与背景颜色在明暗上的差异。数值越大，文字就越容易辨认。WCAG（Web Content Accessibility Guidelines）正是基于这个数值，制定了 AA、AAA 两个等级的合规标准。本工具会根据输入的两个颜色代码自动计算对比度，让你一眼就能看出是否满足其中五项具体标准。
计算的基础是一个称为「相对亮度（relative luminance）」的数值。它并不是 HSL 中的 L 值那样简单的明度，而是先去除 sRGB 的伽马校正，再按照人眼对红、绿、蓝三种颜色的敏感度差异分别加权后相加，因此更接近人眼实际感受到的明暗印象。相近的颜色几乎必然会得到较低的对比度，因此「未通过」并不代表所选颜色本身有问题，而只是说明两者之间的明暗差距需要进一步拉大。
对比度检查工具的使用方法
- 输入文字颜色 可以通过取色器选择，也可以直接输入十六进制颜色代码，默认值为深灰色（#333333）。
- 输入背景颜色 同样可以通过取色器或十六进制颜色代码指定，默认值为白色（#ffffff）。
- 查看计算结果 输入后会实时显示对比度数值，以及针对 AA、AAA 各项标准的通过/未通过标记。
- 按需交换颜色 点击「交换颜色」按钮即可反转文字色与背景色，方便以相反的配色方案再次比较。
用好本工具的小技巧
- 文字颜色和背景颜色既可以通过取色器选择，也可以直接输入十六进制颜色代码（支持 `#RRGGBB` 和 `#RGB` 两种格式）。
- 点击「交换颜色」按钮可以快速交换文字色与背景色进行对比，在比较多套 Logo 或图标配色方案时非常方便。
- AAA 标准比 AA 标准更严格。一般网站建议至少达到 AA 标准，但对可读性要求特别高的内容，建议以 AAA 标准为目标。
- 按钮边框、图标等「UI 组件与图形对象」的对比度要求（3:1 以上）是 WCAG 2.1 新增的成功标准（1.4.11）。
这些场景中会用到本工具
检查按钮与链接的配色
输入网站主要操作按钮或文字链接的文字色与背景色，确认是否满足 AA 标准（4.5:1 以上）。
核对 Logo、横幅与背景色的搭配
可以提前验证 Logo 颜色或宣传横幅上的文案，在实际使用的背景色上是否依然保持足够的可辨识度。
审核设计系统的配色方案
逐一输入现有品牌色与文字色的组合，全面检查整套 UI 是否满足无障碍要求，并留存检查结果。
验证深色模式的配色
有助于逐项确认为深色模式反转后的配色，是否与浅色模式一样满足对比度标准。
术语解释
- 相对亮度（relative luminance）
- 在去除 sRGB 伽马校正后，按人眼对红、绿、蓝三色敏感度差异加权求和得到的明度指标，是计算对比度的基础。
- 对比度
- 由较亮颜色与较暗颜色的相对亮度计算得出、介于 1:1 到 21:1 之间的数值。数值越大，两种颜色的明暗差异越大，文字也越容易阅读。
- WCAG
- Web Content Accessibility Guidelines 的缩写，是由 W3C 制定的国际性网页无障碍指南，对比度的达标标准也在其中定义。
- AA 标准
- WCAG 中第二高的达标等级，要求正常文本的对比度不低于 4.5:1，被许多法规和指南视为最低目标水平。
- AAA 标准
- WCAG 中最高的达标等级，要求正常文本的对比度不低于 7:1。虽非强制要求，但在特别重视可读性的场景中值得追求。
- 大号文本
- WCAG 所定义的、18pt（约 24px）以上的常规字体，或 14pt（约 18.66px）以上粗体字的分类，适用比正常文本更宽松的标准。
- UI 组件
- 按钮边框、输入框轮廓、图标等表示可操作对象的视觉元素。WCAG 2.1 新增了针对这类元素、不低于 3:1 的对比度要求。
常见问题
闲话 ― 无障碍标准诞生的背景
WCAG（Web Content Accessibility Guidelines）是由 W3C（World Wide Web Consortium，万维网联盟）主导制定的国际性指南，其最初版本 WCAG 1.0 发布于 1999 年。早在当时，减少视觉障碍用户借助屏幕阅读器等辅助技术使用网页时所遇到的障碍，就已被视为一项重要课题。
对比度标准之所以受到重视，与人类视觉的多样性密切相关：一定比例的人群存在色觉异常（色弱），例如男性中约每 20 人就有 1 人；随着年龄增长，晶状体发黄会导致对比敏感度下降；此外，在室外强烈日光下手机屏幕也会变得难以看清。设定数值化的标准，使设计师不必仅凭主观的「是否好看」来判断，而能够客观地验证内容的无障碍程度。
如今，网页无障碍在许多国家已成为法律层面的要求（例如日本自 2024 年 4 月起施行的《残疾人歧视消除法》修订案，规定企业必须提供合理便利），检查对比度已经成为企业建设网站时不可回避的基本质量检查项之一。