颜色对比度检查器
比较文本与背景颜色,查看对比度,并检查普通文本、大号文本和必要界面细节的 WCAG 数值阈值。
检查一组颜色
- 输入三位或六位 HEX 颜色,或使用颜色选择器。背景必须为不透明的纯色。
- 不透明文本请保持前景不透明度为 100%;半透明前景可输入较低的百分比。三个值均有效时结果会更新。
- 查看对比度,以及普通文本、大号文本和非文本的各项结果。结合实际设计情境检查,需要分享时可复制带适用范围说明的报告。
理解对比度结果
普通文本的数值阈值为 AA 级 4.5:1 和 AAA 级 7:1。计算比较的是相对亮度,而不是颜色名称听起来有多不同。
大号文本的阈值为 AA 级 3:1 和 AAA 级 4.5:1。大号文本至少为 18pt 常规字重或 14pt 粗体,其他文字系统可使用等效大小,约为 24 和 18.67 CSS 像素;实际排版仍需检查。
前景不透明度会改变其在所选背景上的有效颜色。100% 表示完全不透明;0% 时前景融入背景,对比度为 1:1。本工具不处理背景透明度。
非文本 3:1 行比较此颜色组合中必要视觉细节与相邻颜色的对比度。所有判断均使用未经四舍五入的值;显示两位小数只是为了便于阅读。
可验证的示例
黑色 #000000 与白色 #FFFFFF 在不透明度为 100% 时得到 21:1,达到显示的五项数值阈值。交换这两种不透明颜色不会改变对比度。
灰色 #777777 与白色的对比度约为 4.48:1。它未达到普通文本 AA 级的 4.5:1,却超过大号文本 AA 级的 3:1。
在此 sRGB 计算中,不透明度为 50% 的黑色叠加在白色上,对比度约为 3.98:1。即使原始不透明颜色的对比度很高,降低不透明度也可能使其下降。
颜色组合只是无障碍评估的一部分
本工具评估不透明背景上的纯色 sRGB 颜色,可调整前景不透明度。它不会检查网页、读取字体、采样图片或渐变、模拟色觉,也不会评估所有 WCAG 要求和例外。
达到数值阈值不代表网页或产品获得无障碍认证。请检查实际文字大小和字重、相邻颜色、有意义的形状与状态及其他无障碍要求。显示效果和抗锯齿也会影响实际可读性。
在浏览器中计算
比较在浏览器中进行,工具不会上传颜色或保存颜色历史。只有在请求复制时,才会将当前报告写入剪贴板。网站常规服务和同意设置另行适用。
