配色审计

配色方案无障碍审计

把你的配色方案贴进来,工具会两两比对对比度,标出通过 AA 的组合,帮你提前避开可读性雷区。


关于配色审计

为什么需要审计

配色好不好看是主观的,但“能不能看清”是客观的。WCAG 要求正文文字与背景对比度至少 4.5:1,大字至少 3:1。

怎么看结果

表格每一格是两种颜色之间的对比度比值;绿色代表达到 AA 正文标准,红色代表不达标。对角线(自身对比)无意义,显示为“—”。

常见误区

只挑一个“主色 + 背景”检测是不够的,组件叠加、悬停态、浅色标签都会引入新的颜色组合,全部都要过一遍。

工具介绍与使用说明

📘

配色审计批量检测一组颜色的两两 WCAG 对比度,提前避开可读性雷区。

  • 粘贴一组颜色(每行一个或逗号分隔),工具批量检测两两对比度。
  • 不达标的一对会高亮提示,便于及时替换。
  • 修正后重新粘贴检测,直到所有关键组合达标。

使用提示

💡
  • 至少放 2–3 种颜色才有意义,模拟真实界面里的前景、背景与强调色。
  • 绿色=达到 AA 正文(≥4.5:1),红色=不达标,优先修红格。
  • 改完配色后重新粘贴检测,悬停态、浅标签等叠加组合也要过一遍。