Irodori彩り

对比度网格

任意颜色列表的 N×N WCAG 矩阵

简介 对比度网格

任意颜色列表的 N×N WCAG 矩阵

如何使用

一次性审计整个色板:在单个网格中渲染每对颜色及其对比度比值。

局限与边界

矩阵只比较你输入的这些颜色,不涉及字号,也不知道哪些组合会真正同屏出现。

对比度网格

点击单元格可复制前景 / 背景组合。

如何阅读矩阵

行是前景色,列是背景色。每个单元格显示该组合的 WCAG 比值,并标注正文 AA 与 AAA 是否通过。

对角线是颜色与自身比较,比值恒为 1:1,因此只作为参考。

什么时候使用

上线前用网格审查整套令牌。它能暴露那些单独看没问题、组合后却失败的色对,尤其是同时用作文字和表面的中间调品牌色。

常见问题

标签代表什么?
正文 AA 需要 4.5:1,AAA 需要 7:1;大字号分别对应 3:1 与 4.5:1。
对角线为什么被标记?
颜色与自身的比值永远是 1:1,因此标记为参考而不是失败。
可以粘贴超过五种颜色吗?
可以。每行一个颜色,矩阵会随列表增长。