94 · 生产力

颜色转换器和对比度检查器

输入任何常见格式的颜色以获取其他颜色,然后检查它在您的背景颜色上是否可读。

您的数据: 该工具处理您在此浏览器中的输入。 CapyHelp 不会上传该输入来生成结果。 隐私详情

颜色转换器和对比度检查器

十六进制、rgb() 或 hsl()。

氨基酸敏捷的棕色狐狸跳过了那只懒狗。

十六进制

—

如何使用颜色转换器和对比度检查器

  1. 输入十六进制颜色(#4f46e5), rgb() 或 hsl(),或使用选择器。
  2. 输入背景颜色以检查对比度。
  3. 查看对比度以及普通文本和大文本是否通过 WCAG AA 和 AAA。

了解对比度

网页内容可访问性指南 (WCAG) 按 1:1(相同)到 21:1(黑底白字)的比例比较两种颜色的相对亮度。

  • AA 普通文本至少需要 4.5:1,大文本(大约 24 像素或 19 像素粗体)至少需要 3:1。
  • AAA 普通文本需要 7:1,大文本需要 4.5:1。

良好的对比度可以帮助每个人在明亮的光线下或在较差的屏幕上阅读,而不仅仅是视力不佳的人。

示例

#4F46E5 白色文字

对比度 6.29:1 · 正常文本通过 AA,未通过 AAA

HSL(243, 75%, 59%)

#5048E5·RGB(80,72,229)

问题

为什么 HSL 到 HEX 的往返不准确?

HSL 值四舍五入为整数,因此转换回来可以将通道移动一位。差异是不可见的。

它支持透明度吗?

rgba() 和 hsla() 中的 Alpha 值被接受但被忽略,因为对比度取决于透明颜色背后的内容。

是否支持 3 位十六进制?

是的。 #f80 读作#ff8800。

自动翻译。回顾重要结果。