颜色工具

颜色对比度检测工具

在线检测前景色与背景色的颜色对比度,支持十六进制与 RGB 格式并提供文本可读性阈值评估。

运行工具

颜色对比度检测工具用于计算前景色与背景色之间的对比比率,并根据可读性阈值评估搭配效果。在网页与界面设计中,文字与背景的对比度直接影响内容的辨识度。该工具支持以井号开头的 3 位或 6 位十六进制颜色代码(如 #333 或 #1a1a1a),以及 rgb(r,g,b) 格式的十进制数值。输入颜色后,系统会自动去除首尾空格并转换为小写进行解析。当输入的两种颜色格式有效时,工具会计算出保留两位小数的对比度比率。比率结果将分别对照常规文本(4.5 与 7.0 阈值)以及大号文本(3.0 与 4.5 阈值)的标准进行状态提示。若两个颜色完全相同,计算出的对比度比率为 1.0。若颜色格式无法解析,结果面板会显示相应提示,方便您调整数值重新计算。

使用说明

  1. 在前景色输入框中输入文字或前景元素的颜色代码,例如十六进制 #000000 或 RGB 格式 rgb(0,0,0)。
  2. 在背景色输入框中输入底色的颜色代码,例如十六进制 #ffffff 或 RGB 格式 rgb(255,255,255)。若留空,将分别使用默认的黑色与白色。
  3. 查看结果面板中计算出的对比度数值,以及针对常规文本与大号文本的阈值评估结果。

示例

  • 评估深灰文字配白底:前景色输入 #333333,背景色输入 #ffffff,计算得出对比度约为 12.63:1,满足常规文本与大号文本的高对比度标准。
  • 评估蓝底白字:前景色输入 rgb(255, 255, 255),背景色输入 rgb(0, 102, 204),得出对比度数值并查看对应的文本阈值达标情况。

常见问题

支持哪些颜色格式输入?

目前支持以 # 开头的 3 位与 6 位十六进制代码(如 #fff 或 #ffffff),以及 rgb(r,g,b) 形式的十进制数值。

前景色和背景色不填写会怎样?

输入框可不填。如果不填写,前景色将默认采用黑色(#000000),背景色将默认采用白色(#ffffff)。

为什么两组颜色相同时对比度是 1.0?

当解析后的前景色与背景色完全一致时,两者之间不存在明度差异,因此计算出的对比比率固定为 1.0。

常规文本与大号文本的对比度阈值是多少?

常规文本对应的评估阈值为 4.5 与 7.0;大号文本对应的评估阈值为 3.0 与 4.5。

嵌入此工具

使用以下代码,将这个可直接使用的 SmartPlusLab 工具添加到您的网站。