适用人群
- 选择文字颜色的设计师
- 检查明暗主题的开发者
Developer Utility
Color Contrast Checker
计算文本颜色与背景颜色之间的对比度，并检查是否符合 WCAG AA 和 AAA 无障碍标准。
对比度计算
计算文本颜色与背景颜色的相对亮度差异，并显示准确的对比度。
WCAG 标准检查
分别检查普通文本和大文本是否符合 AA 和 AAA 标准。
实时预览
立即查看所选颜色组合在实际界面中的显示效果。
颜色输入
使用 HEX 颜色代码输入文本颜色和背景颜色，或通过颜色选择器进行选择。
Preview
Color Contrast Checker
此示例文本用于展示文本在背景上的实际显示效果。可用于检查正文、按钮、卡片、横幅以及深色模式配色方案。
检查结果
查看计算出的对比度以及 WCAG 无障碍标准通过情况。
Contrast Ratio
-
请输入颜色后点击“检查对比度”按钮。
普通文本 AA
4.5:1 以上
等待中
普通文本 AAA
7:1 以上
等待中
大文本 AA
3:1 以上
等待中
大文本 AAA
4.5:1 以上
等待中
检查结果将在此处显示。
对比度标准比较
根据文本大小和无障碍等级，需要满足不同的对比度要求。
普通文本
正文、说明文字、菜单和表单标签等较小文本通常需要至少 4.5:1 的对比度。
大文本
较大的标题或加粗文本在 AA 标准下可使用较低的 3:1 对比度。
UI 组件
在设计按钮、徽章、卡片、表单等界面元素时，也应检查文本是否具有足够的可读性。
使用可复现的颜色组合检查文字对比度
输入文字和背景的 HEX 颜色，分别查看普通文字及大号文字的 WCAG AA、AAA 结果。适合核对正文、标签和按钮文字的配色。
使用场景
- 对比灰色标签与实际背景。
- 交换前景和背景，确认相同的对比度。
从输入到检查结果
- 1
输入不透明的三位或六位 HEX，或使用颜色选择器。
- 2
运行对比度检查。
- 3
根据实际字号及字重，查看对应的普通或大号文字判定。
- 4
修改 HEX 后重新检查，再复制报告。
黑字白底
- 输入
- 文字：#000000 背景：#ffffff
- 结果
- 21.00:1，四项文字检查均通过
交换文字与背景颜色，比值保持不变。
接近普通文字 AA 门槛的灰色
- 输入
- 文字：#777777 背景：#ffffff
- 结果
- 4.48:1，普通文字 AA 不通过，大号文字 AA 通过
未舍入的值约为 4.4781。普通文字 AA 要求至少 4.5，判定不会用舍入后的显示值代替原始值。
计算与处理原理
将 sRGB 通道线性化后计算相对亮度，再用较亮颜色的亮度加 0.05，除以较暗颜色的亮度加 0.05。普通文字 AA、AAA 门槛为 4.5、7，大号文字为 3、4.5。显示保留两位小数，判定使用未舍入值。
限制与注意事项
- 仅接受不透明 HEX，不采样透明色、渐变或图片。
- 不会自动检测实际字号和字重。
- 文字对比度通过不代表键盘操作、焦点、图片替代文本或整个网站的无障碍检查通过。
数据处理
颜色在浏览器内计算，不上传或保存历史。复制报告包含检查过的颜色、比值和判定。
参考资料
相关工具
- CSS 渐变生成器
创建背景并检查文字下方的颜色。
- CSS clamp 生成器
规划响应式字号。
常见问题
什么是大号文字？
WCAG 指至少 18pt 的普通文字或 14pt 的粗体，大致对应 24 CSS px 或 18.67 CSS px 粗体。请确认实际字体大小和字重。
能输入透明色吗？
不能。先求出与背景合成后的不透明颜色，再输入对应 HEX。
编辑颜色后报告为什么消失？
旧报告对应修改前的颜色。重新检查后，复制结果才与当前颜色一致。