色彩对比度检查器

检查前景色与背景色之间的普通文本及大文本对比度。

用于规划与参考的浏览器端结果。

前景色背景

CSS / HEX

指南

使用前的检查事项

在发布正文、标签或按钮的前景色和背景色前先使用此工具。输入两个 HEX 颜色以查看它们的对比度比率，以及普通文本和大文本的阈值结果。

计算会将 sRGB 通道线性化，得到相对亮度，并将较亮亮度加 0.05 除以较暗亮度加 0.05。再将该比率与 3:1、4.5:1 和 7:1 的文本阈值进行比较。

在背景 #FFFFFF 上输入前景色 #111111 会得到较高的比率。先检查 AA normal 的小正文；若该组合用于大标题，也请再查看 AA large 结果。

仅通过比率并不能完成可访问性审核。还需测试真实字体大小和字重、交互状态、图片上的文字，以及仅依赖颜色传达的信息。

如何把“颜色对比度检查器”的颜色导入到其他应用？

使用结果下方的复制按钮来复制 CSS、HEX 或 HSL 文本。请确认目标应用解释的是同一种颜色格式。

颜色对比度检查器中的屏幕颜色会与印刷一致吗？

不会自动一致。发光式 RGB 屏幕与反射式纸张和墨水使用不同的色域和混色模型，因此仍需要打印配置文件和打样。

仅凭颜色对比度检查器能批准设计 token 吗？

先将其作为候选方案使用，再在真实背景、深色模式、交互状态和文本对比度下测试，然后再命名并批准 token。