# 无障碍色彩对比度检查器 按 WCAG 2.1 AA/AAA 审查整套调色板的颜色组合，并给出调整建议 > 标准页面: https://elysiatools.com/zh/tools/accessible-color-palette-contrast-checker - **分类:** Design - **关键词:** wcag, 对比度, 无障碍, 调色板, 色彩审计, 设计系统 ## 概述 适合设计系统、品牌色板和界面主题审查。会批量计算对比度，并估算最小调整方向。 ## 输入项 - **调色板颜色** (textarea): brand-primary: #1D4ED8 brand-secondary: #F59E0B surface: #FFFFFF text: #111827 - **WCAG 目标级别** (select) - **包含相同颜色配对** (checkbox) ## 适用场景 - 在构建或重构企业级设计系统时，需要批量验证所有基础颜色的无障碍合规性。 - 为网站或应用设计深色模式和浅色模式主题，需确保文本在不同背景下的可读性。 - 进行产品无障碍（A11y）审计，快速定位并修复不符合 WCAG 2.1 标准的品牌色组合。 ## 工作原理 - 在文本框中输入您的调色板颜色名称及对应的十六进制代码（如 surface: #FFFFFF）。 - 选择目标 WCAG 级别（如 AA 普通文本 4.5:1 或 AAA 级），并按需勾选是否包含相同颜色的配对。 - 工具将交叉比对所有输入的颜色，计算每对前景与背景的对比度数值。 - 输出详细的 JSON 报告，列出通过与未通过的组合，并针对不达标的配对提供加深或变浅的调整建议。 ## 使用案例 - 设计系统维护：批量测试 Token 颜色矩阵，确保所有定义的 Text 和 Surface 颜色组合均符合无障碍标准。 - 品牌视觉升级：在确定新的品牌主色调前，评估其在白色背景或深色背景上的对比度表现，避免上线后出现阅读障碍。 - 前端自动化测试：将生成的 JSON 报告集成到无障碍审计流程中，作为 UI 组件库发版前的合规性参考。 ## 常见问题 ### 支持哪些 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 格式输出，包含总颜色数、组合数、未通过数量及具体建议，您可以直接复制用于后续的开发或报告记录。 ## 相关工具 - [颜色无障碍检查](https://elysiatools.com/zh/tools/color-accessibility-checker): 检查颜色对比度是否符合 WCAG 标准 - [颜色对比度检查器](https://elysiatools.com/zh/tools/color-contrast-checker): 检查颜色对比度和WCAG无障碍标准合规性 - [色彩空间转换器](https://elysiatools.com/zh/tools/color-space-converter): 在 HEX、RGB、HSL、CIELAB 与 Display-P3 之间转换颜色，提供 CSS 输出与色域检查。 - [色彩视觉无障碍检查器](https://elysiatools.com/zh/tools/color-vision-accessibility-checker): 计算 WCAG 对比度，模拟主要色觉缺陷，并可对 UI 截图中的低对比区域做标记。 - [TPN 三大营养素配比计算器](https://elysiatools.com/zh/tools/tpn-macronutrient-calculator): 根据肠外营养处方计算葡萄糖/氨基酸/脂肪乳的克数与热量（kcal）、非蛋白热量、非蛋白热量:氮比、热量构成及每公斤指标。能量密度：葡萄糖（一水）3.4 kcal/g、氨基酸 4.0 kcal/g、脂肪乳 20%≈2.0 kcal/mL（10% 1.1、30% 3.0）。氨基酸含氮约 16% → N = AA × 0.16。非蛋白热量:氮比 ~150:1 最优（蛋白保留、避免过度喂养）；< 100:1 蛋白占优（应激/促合成）；> 200:1 能量占优（过度喂养风险：高 CO₂、脂肪肝）。参考目标（ASPEN/ESPEN）：总能 20–30 kcal/kg/日（严重应激可至 30–35）；蛋白 1.0–1.5 g/kg/日（危重可达 2.0）；葡萄糖 ≤ 4–5 mg/kg/min；脂肪 ≤ 1.0–1.5 g/kg/日、占非蛋白热量 ≤ 30–40%。注意事项：本工具为处方分析辅助，非配制配方——务必在药房无菌配制；钙磷须查溶解曲线防 Ca-PO₄ 沉淀；尽早恢复肠内营养（TPN 的 CLABSI 与代谢风险更高）；每日监测血糖、甘油三酯、肝功能、电解质与出入量。来源 ASPEN 2016、ESPEN 2019、McClave 2016、Mirtallo 2004。不构成医疗建议。 - [无障碍审计报告生成器](https://elysiatools.com/zh/tools/accessibility-audit-report-generator): 检查 HTML 或 URL 中的常见 WCAG 问题，并导出按严重程度分组的 PDF 报告 - [无障碍合规检测器](https://elysiatools.com/zh/tools/accessibility-checker): 检测 HTML、网页或设计稿图片中的常见 WCAG 2.1 问题，并给出可直接修复的建议 - [配色方案生成器](https://elysiatools.com/zh/tools/color-scheme-generator): 为设计项目生成专业的配色方案和调色板 ## 示例 - [颜色代码示例](https://elysiatools.com/zh/samples/color-code): 用于验证测试的各种格式颜色代码集合（Hex、RGB、HSL、命名颜色） - [Android Java 图像处理示例](https://elysiatools.com/zh/samples/android-image-processing-java): Android Java 图像处理示例，包括图像读取保存、缩放和格式转换 - [Android Kotlin 图像处理示例](https://elysiatools.com/zh/samples/android-image-processing-kotlin): Android Kotlin 图像处理示例，包括图像读取保存、缩放和格式转换 - [Web Python 图像处理示例](https://elysiatools.com/zh/samples/web-image-processing-python): Web Python 图像处理示例，使用 PIL/Pillow 包括读取、保存、缩放和格式转换 ## 相关内容 - [CSS 效果、配色板与设计 Token 生成工具](https://elysiatools.com/zh/hubs/design-generate): 围绕CSS 视觉效果、配色构建与设计 Token 生成整理的一组工具。 - [网页无障碍审查与可读配色工具](https://elysiatools.com/zh/hubs/web-accessibility-audits): 在一个专题中检查 WCAG 问题、读屏顺序、低对比度区域、色觉缺陷风险和可读配色选择，适合网页与 UI 无障碍工作流。 - [颜色设计与颜色空间转换工具](https://elysiatools.com/zh/hubs/color-design-tools): 在一个专题里比较颜色转换器、调色板生成器、和谐色工具、无障碍检查器和颜色调整工具，适合设计师和开发者。 - [面向网页与印刷的色彩空间转换工具](https://elysiatools.com/zh/hubs/design-convert): 围绕网页到印刷的色彩空间转换整理的一组工具。