颜色对比度网格生成器
指导
颜色对比度网格生成器
输入您的品牌或设计系统的颜色，并生成完整的 WCAG 对比度矩阵，显示每种可能的文本/背景组合的对比度。即时查看哪些颜色对满足 AA、AAA 或无障碍要求 — 对于构建无障碍设计系统和风格指南至关重要。
如何使用
每行输入一个十六进制颜色（可附带可选标签，例如“Primary #3B82F6”），或选择一个预设调色板。点击 生成网格 即可创建对比度矩阵。每个单元格显示实际文本颜色在实际背景色上的对比度，并按 WCAG 合规性级别进行颜色编码。
特征
- N×N 对比度矩阵 – 测试并显示视觉网格中的所有文本/背景组合
- WCAG 颜色编码 – 绿色表示 AAA (≥7:1)，黄色表示 AA (≥4.5:1)，红色表示失败 (<4.5:1)
- 实时颜色预览 – 每个单元格都以实际文本颜色显示在实际背景色上
- AA 大号文本 – 同时指示 AA 大号文本合规性 (≥3:1)，适用于较大的字体大小
- 摘要统计 – 一次性查看测试的总对数、AAA 合规对数、AA 合规对数和失败对数
- 预设调色板 – 快速加载 Tailwind、Material Design 或单色调色板
- 最多 20 种颜色 – 支持 2 到 20 种颜色的调色板
- 客户端仅支持 所有计算都在您的浏览器中进行。
常问问题
-
WCAG 对比度级别意味着什么？
WCAG（Web 内容无障碍指南）为文本可读性定义了对比度比率。AAA (≥7:1) 是最高标准，确保视力中度受损的用户能够阅读文本。AA (≥4.5:1) 是正常大小文本的最低标准。AA 大号 (≥3:1) 适用于 18pt 或更大（或 14pt 加粗）的文本。大多数无障碍法律和标准要求网站内容至少符合 AA 标准。
-
为什么我需要对比度网格而不是单独检查颜色对？
对比度网格一次显示您调色板中的每种可能的颜色组合，从而揭示您单独检查颜色对时会忽略的问题。设计系统通常有 8-15 种颜色，可能以各种文本/背景组合使用。一个包含 10 种颜色的网格同时测试 100 对颜色，即时显示哪些组合是无障碍的，哪些不是。这对于为设计团队创建全面的无障碍文档至关重要。
-
对比度比率是如何计算的？
WCAG 对比度比率使用相对亮度，该亮度根据线性化的 sRGB 值计算。使用以下公式将每个颜色通道从 gamma 编码的 sRGB 转换为线性光：如果 sRGB 值为 0.03928 或更低，则除以 12.92；否则，将 (value + 0.055) / 1.055 的 2.4 次幂。相对亮度然后是 0.2126×R + 0.7152×G + 0.0722×B。对比度比率是 (较亮亮度 + 0.05) / (较暗亮度 + 0.05)，始终产生 1:1 到 21:1 之间的值。
