配色审计
配色方案无障碍审计
把你的配色方案贴进来,工具会两两比对对比度,标出通过 AA 的组合,帮你提前避开可读性雷区。
关于配色审计
为什么需要审计
配色好不好看是主观的,但“能不能看清”是客观的。WCAG 要求正文文字与背景对比度至少 4.5:1,大字至少 3:1。
怎么看结果
表格每一格是两种颜色之间的对比度比值;绿色代表达到 AA 正文标准,红色代表不达标。对角线(自身对比)无意义,显示为“—”。
常见误区
只挑一个“主色 + 背景”检测是不够的,组件叠加、悬停态、浅色标签都会引入新的颜色组合,全部都要过一遍。
工具介绍与使用说明
📘配色审计批量检测一组颜色的两两 WCAG 对比度,提前避开可读性雷区。
- 粘贴一组颜色(每行一个或逗号分隔),工具批量检测两两对比度。
- 不达标的一对会高亮提示,便于及时替换。
- 修正后重新粘贴检测,直到所有关键组合达标。
使用提示
💡- 至少放 2–3 种颜色才有意义,模拟真实界面里的前景、背景与强调色。
- 绿色=达到 AA 正文(≥4.5:1),红色=不达标,优先修红格。
- 改完配色后重新粘贴检测,悬停态、浅标签等叠加组合也要过一遍。