色彩对比度网格
一次检查整个调色板的WCAG 2.x对比度比率：粘贴十六进制颜色列表，获得完整的配对网格，其中显示每个组合的确切比率和AA通过/失败情况——非常适合审计设计系统的调色板的可访问性。
输入
每行一个十六进制颜色，或逗号分隔（例如"#000000, #FFFFFF, #FF0000"）。最多12种颜色；无效条目将被跳过。
输出
| No data yet |
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/color-contrast-grid \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"colors": "#000000\n#FFFFFF\n#808080"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `color-contrast-grid` tool (Color Contrast Grid) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/color-contrast-grid/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="色彩对比度网格 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|
也可通过
使用指南
大多数对比度检查器一次只比较一个前景色和一个背景色。设计系统很少只有一对颜色——调色板可能有五种品牌颜色、三种中性颜色和两种强调色，其中任何一种都可能作为文本出现在另一种颜色上。色彩对比度网格可以一次检查整个调色板：粘贴十六进制颜色列表，获得完整的配对矩阵，显示每个组合的确切WCAG 2.x对比度比率和AA通过/失败标记。
什么是WCAG色彩对比度？
WCAG 2.x定义了相对亮度——颜色看起来的亮度程度，经过人眼对红、绿、蓝的感知加权（L = 0.2126×R + 0.7152×G + 0.0722×B，使用线性化的sRGB通道），以及两种颜色之间的对比度比率 (L1 + 0.05) / (L2 + 0.05)（较浅的在较深的上方）——范围从1:1（相同颜色）到21:1（纯黑色在纯白色上）。普通文本的WCAG AA阈值是4.5:1——大多数无障碍审计、Lighthouse和法律标准（ADA、EN 301 549、Section 508）所要求的标准。此工具用✓标记每个超过4.5:1的单元格，用✗标记每个未超过的单元格。
如何使用
- 将您的调色板粘贴到颜色字段中——每行一个十六进制颜色，或逗号分隔（例如
#000000, #FFFFFF, #FF0000）。3位十六进制数（#fff）也适用。 - 网格会立即更新：第一行和第一列列出您的颜色，其他每个单元格显示该行颜色用作该列颜色背景上的文本时的对比度比率，例如
4.53:1 ✓。 - 扫描网格以查找✗单元格——这些是如果一起使用会对普通文本失败WCAG AA的配对，值得避免或调整。
- 使用Copy或Download将网格导出为CSV，用于设计系统审计或拉取请求注释。
每个网格支持最多12种颜色（144个单元格）——足以一次检查大多数品牌和UI中立调色板。任何不是有效的3位或6位十六进制颜色的条目都会被跳过而不是破坏网格，重复的颜色会合并为一种。
常见问题
为什么对角线总是1.00:1并标记为✗？ 将颜色与自身比较时，亮度相同，因此比率总是正好1:1——最小可能值，远低于AA 4.5:1的阈值。这是预期的；对角线不是有意义的配对（没有人会将文本和背景设置为相同的颜色），它只是网格为N×N的副产物。
网格是对称的吗？ 是的——根据定义，对比度比率是对称的（只取决于哪个亮度更浅和哪个更深，不取决于哪种颜色是"前景"），所以颜色A在颜色B上总是等于颜色B在颜色A上。
✓/✗标记代表什么——是AA还是AAA？ 通过标记使用普通文本的WCAG AA（≥4.5:1），这是大多数审计和法律标准检查的阈值。标记为✗的配对可能仍然满足更宽松的AA大文本阈值（3:1）；要获得单一配对在所有四个WCAG阈值（AA/AAA×普通/大）上的详细分解（包括建议的可访问颜色），请使用Accessible Color Pair Finder。
我可以粘贴带有名称或其后的额外文本的颜色吗？
该工具在每行或逗号分隔条目的开头查找有效的十六进制颜色——格式为#RRGGBB或#RGB的文本。任何不是可识别十六进制颜色的内容都会被跳过，因此请保持每个条目只是颜色本身。
为什么将列表限制在12种颜色？ 超过12种颜色时，网格会增长到144个或更多单元格，变得难以在视觉上扫描——如果需要检查更大的调色板，请将其分成较小的相关组（例如中性颜色，然后品牌颜色）。
我的颜色数据会被发送到任何地方吗？ 否——每项计算都完全在您的浏览器中运行。没有任何内容被上传或存储。