AA（推荐最低标准）
这是大多数无障碍法规要求的等级，包括《欧洲无障碍法案》。
- 普通文本
- 4.5:1
- 大文本 / UI
- 3:1
颜色对比度检查器（WCAG AA 和 AAA）
检查文字在背景上是否清晰可读：计算 WCAG 对比度，检查普通文本、大文本和界面元素的 AA 与 AAA 等级，并获得最接近且达标的颜色。
良好
预览标题
敏捷的棕色狐狸跳过懒狗
颜色
普通文本
AA 4.5 · AAA 7
AAAAA大文本
AA 3 · AAA 4.5
AAAAAUI 元素
AA 3
AA
对比度 4.64:1. 普通文本: AA 通过, AAA 未通过. 大文本: AA 通过, AAA 通过. UI 元素: AA 通过.
达标的颜色
色相相同、在普通文本中达标的最接近颜色。点击即可应用。
AA 要求普通文本 4.5:1、大文本 3:1；AAA 分别要求 7:1 与 4.5:1。
示例组合
常见的颜色搭配：有的达标，有的不达标。载入一组进行检查。
什么是对比度，为什么它很重要
对比度衡量两种颜色之间的亮度差异，通常是文字颜色与其背景颜色。数值越高，文字与背景越容易区分。国际参考标准《Web 内容无障碍指南》（WCAG）根据文字大小和想要达到的符合等级，规定了最低对比度。
对比度不足不只是美观问题：它会让低视力者、色觉异常者，或者只是在阳光下使用手机的任何人难以阅读。此外，在许多国家，根据数字无障碍法规，符合 WCAG 是法律要求。
AA 和 AAA 等级详解
AAA（增强等级）
推荐用于关键内容或有更高无障碍需求的受众，但不一定要求整个网站都达到。
- 普通文本
- 7:1
- 大文本
- 4.5:1
三步检查对比度
选择文字和背景
点击文本颜色或背景颜色，用选择器、吸管或输入代码进行调整。支持透明度。
逐项检查
你会看到对比度数值，以及普通文本、大文本和图标、输入框边框等界面元素是否达到 AA 和 AAA。
应用建议
如果未达标，工具会推荐色相相同、最接近且达标的颜色。点一下就好。
什么算大文本
WCAG 将至少 18 点（24 px）或粗体 14 点（约 18.66 px）的文字视为大文本。由于笔画更粗，较低的对比度也能看清：AA 只需 3:1，AAA 只需 4.5:1。
其余都是普通文本，AA 需要 4.5:1，AAA 需要 7:1。注意注释、标签或图片说明等小号辅助文字：它们最常不达标。
按钮、图标和输入框的对比度
对比度不仅关乎文字。WCAG 要求使用页面时必须看清的界面元素至少达到 3:1：表单输入框的边框、传达信息的图标、焦点指示器或控件的状态。
白底上非常浅的灰色边框也许显得优雅，但很多人会看不出输入框在哪里。
无需达标
- 标志
- 装饰性文字
- 禁用的控件
- 图片和照片
对比度如何计算
对比度比较两种颜色的相对亮度，也就是在校正人眼响应后，每种颜色发出多少光。
L1- 较浅颜色的相对亮度，从 0（黑）到 1（白）。
L2- 较深颜色的相对亮度。
0.05- 补偿屏幕反射的环境光。因此最大值是 21:1（黑底白字），最小值是 1:1（相同颜色）。
(L1 + 0.05) / (L2 + 0.05)
Aa(1 + 0.05) / (0 + 0.05) = 21:1
常见问题
对于普通文本，至少 4.5:1 的对比度符合 WCAG AA 等级，这是推荐的最低标准。增强对比度（AAA 等级）需要 7:1。
AA 是大多数无障碍法规要求的最低等级。AAA 是更严格的增强等级，推荐用于关键内容，但不一定要求整个网站都达到。
因为大字的尺寸和笔画粗细本身就让阅读更容易，所以 WCAG 允许较低的对比度（AA 为 3:1），而普通文本要求 4.5:1。
至少 18 点（24 px）或粗体 14 点（约 18.66 px）的文字。AA 需要 3:1，AAA 需要 4.5:1，而普通文本分别是 4.5:1 和 7:1。
在许多国家是的，尤其是公共机构；根据《欧洲无障碍法案》等法规，私营企业也越来越多地被纳入。即使没有法律义务，符合 WCAG 也能改善所有用户的体验。
根据两种颜色的相对亮度（衡量它们反射多少光的指标）计算，以 1:1（无对比，同一颜色）到 21:1（最大值，纯黑底上的纯白）之间的比例表示。
不需要。WCAG 豁免标志、装饰性文字和禁用的控件。但启用的按钮、表单输入框、有意义的图标和焦点指示器需要至少 3:1。
对比度按实际看到的颜色计算：半透明文字在测量前会与背景混合，半透明背景会与白色混合。你可以在工具的颜色输入框中添加透明度。
使用工具的建议：它会推荐色相不变、满足 AA 或 AAA 的最接近文字色或背景色，让你的品牌保持不变。你也可以在颜色选择器中探索颜色的变化。