颜色转换器与对比度检查工具

转换器实时将一种颜色在 HEX(#rrggbb)、RGB(rgb(r, g, b))、HSL(hsl(h, s%, l%))之间互相转换,无论你的设计系统用哪种格式,粘贴后都能拿到另外两种。对比度检查器会读取前景色和背景色,通过 sRGB 伽马曲线对两者进行线性化,然后报告 WCAG 2.x 对比度,并针对普通文本和大号文本给出 AA / AAA 判定。

示例

输入 —— 典型的品牌蓝:

HEX  #2563eb
RGB  rgb(37, 99, 235)
HSL  hsl(221, 83%, 53%)

与白色(#ffffff)背景搭配:

Contrast ratio   5.17:1
WCAG AA normal   Pass
WCAG AA large    Pass
WCAG AAA normal  Fail (needs 7:1)
WCAG AAA large   Pass

为什么这组颜色未通过 WCAG AAA?

这些是对比度和转换中最常见的几个陷阱:

• 混淆 AA 大号文本和 AA 普通文本。 大号文本只需 3:1,所以在 H1 里看起来没问题的链接,在正文字号下仍可能失败。若某组合只有 3.5:1,它能通过标题但无法通过段落。
• 用 HSL 亮度代替对比度。 hsl(0, 100%, 50%)(红)和 hsl(240, 100%, 50%)(蓝)的 L 都是 50%,但亮度差异很大。对比度请始终以 RGB 值计算,不要用 HSL 亮度。
• 忽略 alpha 合成。 白底上的 rgba(0, 0, 0, 0.6) 文本实际等同于 #666666。请使用平铺后的 HEX,而不是半透明值来检测。
• 错误的 HEX 位数。 #fff 展开为 #ffffff,但 #ffff 是包含 alpha 字节的 4 位短写。HEX 输入被静默拒绝时,先核对位数。
• 混用 display-P3 和 sRGB。 在 Figma 等设计工具的广色域模式下取出的颜色可能超出 sRGB 范围,浏览器会裁剪它们。复制 HEX 之前先在源工具中转换为 sRGB。
• 只在纯白上测试对比度。 如果实际布局把文本放在 #f3f4f6 或照片上,可见对比会更低。请用真实背景测试。

要通过 WCAG AA,需要多少对比度?

WCAG 2.1 AA 要求普通正文文本达到 4.5:1,大号文本达到 3:1 —— 大号指至少 18 pt(24 px)常规或 14 pt(18.66 px)粗体。UI 组件和图形对象相对背景需达到 3:1。AAA 将门槛提高到普通文本 7:1、大号文本 4.5:1。

把输出的 HSL 重新输入时,RGB 值为何会略有不同?

大多数工具把 HSL 存为整数百分比,因此 RGB → HSL → RGB 往返时每个通道可能漂移 1 个单位。这种偏差在 JND 之内,屏幕上看不出来;若需要严格往返一致,请以 HEX 或 RGB 作为唯一真实值,HSL 仅作为视图。

该工具的对比度是否使用 sRGB 伽马校正?

是的。对比度按 WCAG 2.x 公式计算:先用伽马曲线对每个 sRGB 通道做线性化,再算相对亮度,最后取 (L1 + 0.05) / (L2 + 0.05)。简单通道求平均或天真的 HSL 亮度会得到误导结果,与 WCAG 结果不一致。

如何处理 alpha 或半透明颜色?

WCAG 对比度针对实色背景定义,所以请先把前景在真实背景上合成以平铺 alpha。例如白页上一个 50% 黑色文本块,实际等同于 #ffffff 上的 #808080。把这个平铺后的 HEX 传给检查器,而不是半透明值。

HEX #rgb 和 #rrggbb 是一样的吗?

是的。3 位短写会把每个 nibble 重复一次来展开,所以 #f0c 等于 #ff00cc。4 位和 8 位形式额外带 alpha 通道。本工具接受 3 位、6 位和 8 位 HEX;因为 WCAG 要求实色合成,所以 alpha 字节只作信息参考。

你们会保存我输入或挑选的颜色吗?

不会。我们不保留你用于测试、转换或对比度检查的任何颜色。你输入或拖入选色器的一切,在关闭标签页时会全部丢弃 —— 没有日志,也没有关于你色值的任何分析。可以在浏览器开发者工具中自行查验。