WCAG 无障碍配色生成器

生成一组随机配色,并筛选出与白色或黑色文字搭配时真正达到 WCAG AA 或 AAA 对比度标准的颜色。亮度和对比度的计算直接在您的浏览器中完成。

6 种颜色
Aa
白色文字:1.72:1
黑色文字:12.24:1
✅ AAA
Aa
白色文字:1.81:1
黑色文字:11.62:1
✅ AAA
Aa
白色文字:3.08:1
黑色文字:6.82:1
✅ AA
Aa
白色文字:11.26:1
黑色文字:1.86:1
✅ AAA
Aa
白色文字:1.77:1
黑色文字:11.85:1
✅ AAA
Aa
白色文字:1.76:1
黑色文字:11.96:1
✅ AAA

工作原理

只凭美观来选择品牌配色,往往会导致这些颜色与文字搭配后无法通过无障碍测试。此工具会随机抽取颜色,按照 WCAG 公式计算它们的相对亮度,再分别计算与白色文字和黑色文字的对比度,并(如果您愿意)只保留达到 AA 或 AAA 级别的颜色。

对比度是如何计算的?

计算遵循 WCAG 官方公式:先将每种颜色转换为相对亮度(一种衡量感知明暗的指标,考虑了人眼对红、绿、蓝各通道的不同敏感度),再用较亮颜色的亮度与较暗颜色的亮度相比,得到对比度。21:1 的对比度是可能的最大值(纯黑配纯白)。

为什么有些颜色显示「白色文字」,而另一些显示「黑色文字」?

工具会分别计算两种方向的对比度,并自动选出在生成的背景色上对比度更高的文字颜色(白色或黑色):如果您要把这种颜色用作界面背景,就应该使用这个搭配。

所有亮度和对比度的计算都在您浏览器的 JavaScript 中运行:生成的颜色不会发送到任何服务器。