可访问性要求越来越高——WCAG 符合性在许多司法管辖区是法律要求,即使不是,对比度低也会把用户推走。对比度检查器立即告诉您任意两种颜色是否符合 WCAG 标准。通过颜色选择器或粘贴十六进制值选择前景色和背景色;该工具使用官方 WCAG 亮度公式计算对比度,并针对四个阈值对其进行分级:AA 正常(≥4.5:1)、AA 大号(≥3:1)、AAA 正常(≥7:1)和 AAA 大号(≥4.5:1)。每个阈值都显示一个清晰的通过/失败徽章。实时预览在所选颜色中呈现大号和正常文本,以便您看到实际的视觉影响。一个便利按钮对当前页面的计算主体背景色进行采样——对于测试真实网站上的颜色组合很有用。所有内容在您的浏览器中本地运行,无需上传。
使用官方 WCAG 亮度公式计算对比度。结果精确,与每个兼容的可访问性检查器匹配。
AA 正常(≥4.5:1)、AA 大号(≥3:1)、AAA 正常(≥7:1)、AAA 大号(≥4.5:1)的通过/失败——全部以网格形式显示。
在所选颜色中呈现实际的大号和正常文本,以便您看到视觉影响和数值比率。
一键对当前页面的计算主体背景色进行采样——对于测试真实组合很有用。
键入十六进制值或使用本地颜色选择器。当您编辑其中任一个时,值会双向同步。
一键交换翻转前景色和背景色——对于检查反转主题或悬停状态很有用。
在最终确定调色板之前,检查每个文本颜色与其背景是否符合 WCAG AA——避免以后返工。
在实时网站上使用"选择页面背景",然后粘贴实际的文本颜色——在几分钟内发现 a11y 违规,无需打开 Lighthouse。
当品牌选择可能失败 a11y 的颜色时,使用检查器找到最接近的兼容变体(更暗/更浅的阴影)。
验证悬停/活动/禁用状态颜色仍然符合对比度要求,而不仅仅是默认值。
深色主题对于灰色文本上的灰色通常会失败对比度。检查您最暗的灰色与您最暗的背景以捕获这些。
单击 DevSuite Pro 停靠栏中的对比度图标。打开一个面板,显示前景色和背景色字段。
为每个使用颜色选择器或粘贴十六进制值。当您更改颜色时,实时预览会更新。
大数字(例如 4.8:1)是对比度。更高更好。3 是最少限度;4.5 是正常文本的目标。
AA 和 AAA、正常和大号文本大小的通过/失败徽章一目了然地显示您的组合符合什么等级。
如果失败,调整颜色。变暗前景色或变浅背景色(或反之)直到目标层级显示通过。