Elysia Tools
导航
Design
按 WCAG 2.1 AA/AAA 审查整套调色板的颜色组合，并给出调整建议
详情
适合设计系统、品牌色板和界面主题审查。会批量计算对比度，并估算最小调整方向。
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
等待运行
工具使用指南
无障碍色彩对比度检查器是一款专为设计师和开发者打造的实用工具，能够根据 WCAG 2.1 标准批量审查整套调色板的颜色组合。只需输入品牌色或设计系统的颜色代码，工具即可自动交叉计算所有前景与背景的对比度，快速识别不符合 AA 或 AAA 级别的组合，并提供最小化调整建议，确保您的界面设计对所有用户都清晰易读。
背景
团队正在设计一套全新的 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 的对比度要求。
背景
正在开发一个政府公共服务网站，法律要求所有文本必须符合最严格的 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，工程师根据建议调整了链接颜色的亮度，确保完全合规。
支持 WCAG 2.1 规范下的四种标准：AA 级普通文本（4.5:1）、AA 级大文本（3:1）、AAA 级普通文本（7:1）以及 AAA 级大文本（4.5:1）。
请在文本框中每行输入一个颜色，格式为“名称: 颜色代码”，例如 brand-primary: #2563EB。支持标准的十六进制颜色值。
对于未达到所选 WCAG 标准的颜色对，工具会估算并建议将前景色或背景色加深或变浅，以达到最小合规对比度。
勾选后，工具会计算同一种颜色作为前景和背景时的对比度（通常为 1:1，必然不达标）。这在某些自动化测试或生成完整矩阵报告时可能会用到。
检查结果会以结构化的 JSON 格式输出，包含总颜色数、组合数、未通过数量及具体建议，您可以直接复制用于后续的开发或报告记录。