分类

← View All Tools

无障碍色彩对比度检查器

按 WCAG 2.1 AA/AAA 审查整套调色板的颜色组合，并给出调整建议

适合设计系统、品牌色板和界面主题审查。会批量计算对比度，并估算最小调整方向。

示例结果

1 个示例

审查品牌调色板的 WCAG AA 对比度

检查所有前景/背景组合，并给出哪些品牌色需要加深或变浅的建议

{
  "summary": {
    "colorCount": 4,
    "combinationCount": 12,
    "failingCount": 4
  },
  "recommendations": [
    {
      "pair": "brand-secondary on surface"
    }
  ]
}
查看输入参数
{ "paletteInput": "brand-primary: #2563EB\nbrand-secondary: #F59E0B\nsurface: #FFFFFF\ntext: #111827", "minimumTarget": "aa", "includeSelfPairs": false }

关键信息

分类
Design
输入类型
textarea, select, checkbox
输出类型
json
样本覆盖
4
支持 API
Yes

概览

无障碍色彩对比度检查器是一款专为设计师和开发者打造的实用工具，能够根据 WCAG 2.1 标准批量审查整套调色板的颜色组合。只需输入品牌色或设计系统的颜色代码，工具即可自动交叉计算所有前景与背景的对比度，快速识别不符合 AA 或 AAA 级别的组合，并提供最小化调整建议，确保您的界面设计对所有用户都清晰易读。

适用场景

  • •在构建或重构企业级设计系统时，需要批量验证所有基础颜色的无障碍合规性。
  • •为网站或应用设计深色模式和浅色模式主题，需确保文本在不同背景下的可读性。
  • •进行产品无障碍（A11y）审计，快速定位并修复不符合 WCAG 2.1 标准的品牌色组合。

工作原理

  • •在文本框中输入您的调色板颜色名称及对应的十六进制代码（如 surface: #FFFFFF）。
  • •选择目标 WCAG 级别（如 AA 普通文本 4.5:1 或 AAA 级），并按需勾选是否包含相同颜色的配对。
  • •工具将交叉比对所有输入的颜色，计算每对前景与背景的对比度数值。
  • •输出详细的 JSON 报告，列出通过与未通过的组合，并针对不达标的配对提供加深或变浅的调整建议。

使用场景

设计系统维护：批量测试 Token 颜色矩阵，确保所有定义的 Text 和 Surface 颜色组合均符合无障碍标准。
品牌视觉升级：在确定新的品牌主色调前，评估其在白色背景或深色背景上的对比度表现，避免上线后出现阅读障碍。
前端自动化测试：将生成的 JSON 报告集成到无障碍审计流程中，作为 UI 组件库发版前的合规性参考。

用户案例

1. 审查品牌调色板的 WCAG AA 对比度

UI/UX 设计师
背景原因
团队正在设计一套全新的 SaaS 产品界面，定义了主品牌色、辅助色、背景色和文本色。
解决问题
需要确保这些基础颜色在相互搭配时（如文本在背景上，或辅助色在主色上）满足基本的无障碍阅读标准。
如何使用
在调色板输入框中填入品牌色代码，将 WCAG 目标级别设置为 AA Normal Text (4.5:1)。
示例配置
brand-primary: #2563EB
brand-secondary: #F59E0B
surface: #FFFFFF
text: #111827
效果
工具输出 JSON 报告，指出 brand-secondary on surface 等组合未通过测试，并建议将辅助色加深以满足 4.5:1 的对比度要求。

2. 严格的政府网站 AAA 级色彩审计

前端无障碍工程师
背景原因
正在开发一个政府公共服务网站，法律要求所有文本必须符合最严格的 WCAG AAA 级无障碍标准。
解决问题
需要验证现有的深色模式调色板是否全部满足 7:1 的高对比度要求。
如何使用
输入深色模式的颜色变量，选择 AAA Normal Text (7:1) 作为目标级别，并执行批量检查。
示例配置
dark-bg: #121212
card-bg: #1E1E1E
primary-text: #E0E0E0
link-color: #60A5FA
效果
快速识别出 link-color on card-bg 的对比度不足 7:1，工程师根据建议调整了链接颜色的亮度，确保完全合规。

用 Samples 测试

design
颜色代码示例
用于验证测试的各种格式颜色代码集合（Hex、RGB、HSL、命名颜色）
title token color
sample
Storybook 示例
全面的Storybook示例，用于组件开发、测试、文档和设计系统管理
keywords design,system
sample
路径分析器样本
来自Windows、Linux和macOS的文件系统路径综合集合，用于路径分析和测试
task analyze
sample
SVG示例
可缩放矢量图形（SVG）示例，展示各种SVG功能和技术
keywords design
sample

相关专题

DesignConvert工具专题
探索 98 个围绕 design 的 convert 工作流工具，快速找到相近能力。
DesignGenerate工具专题
探索 19 个围绕 design 的 generate 工作流工具，快速找到相近能力。
ValidationValidate工具专题
探索 16 个围绕 validation 的 validate 工作流工具，快速找到相近能力。

常见问题

支持哪些 WCAG 对比度标准？

支持 WCAG 2.1 规范下的四种标准：AA 级普通文本（4.5:1）、AA 级大文本（3:1）、AAA 级普通文本（7:1）以及 AAA 级大文本（4.5:1）。

如何输入我的调色板颜色？

请在文本框中每行输入一个颜色，格式为“名称: 颜色代码”，例如 brand-primary: #2563EB。支持标准的十六进制颜色值。

工具会给出怎样的调整建议？

对于未达到所选 WCAG 标准的颜色对，工具会估算并建议将前景色或背景色加深或变浅，以达到最小合规对比度。

“包含相同颜色配对”选项有什么用？

勾选后，工具会计算同一种颜色作为前景和背景时的对比度（通常为 1:1，必然不达标）。这在某些自动化测试或生成完整矩阵报告时可能会用到。

检查结果可以导出吗？

检查结果会以结构化的 JSON 格式输出，包含总颜色数、组合数、未通过数量及具体建议，您可以直接复制用于后续的开发或报告记录。

API 文档

请求端点

POST /zh/api/tools/accessible-color-palette-contrast-checker

请求参数

参数名 类型 必填 描述
paletteInput textarea 是 -
minimumTarget select 否 -
includeSelfPairs checkbox 否 -

响应格式

{
  "key": {...},
  "metadata": {
    "key": "value"
  },
  "error": "Error message (optional)",
  "message": "Notification message (optional)"
}
JSON数据: JSON数据

AI MCP 文档

将此工具添加到您的 MCP 服务器配置中： 

{
  "mcpServers": {
    "elysiatools-accessible-color-palette-contrast-checker": {
      "name": "accessible-color-palette-contrast-checker",
      "description": "按 WCAG 2.1 AA/AAA 审查整套调色板的颜色组合，并给出调整建议",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=accessible-color-palette-contrast-checker",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

你可以串联多个工具，比如：`https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`，最多20个。

如果遇见问题，请联系我们：[email protected]