格子越深，表示该主题在这项指标上越高。
清晰96
说服40
密度28
制作成本35
作业适配88
工作适配94
低高
简短问答
什么时候选WCAG 对比检查？
故事符合「UI 类型、幻灯片标题、海报标题、徽章标签」时选用。
什么时候避开？
遇到「单独判断品牌色调而不测量配对」就换形式。
谁发明或推广了它？
WCAG 对比度； APCA 研究 (Myndex) 作为下一代模型
它编码什么？
前景和背景的亮度差
广告能用吗？
在微信、抖音与展示广告里主张能一眼看见就可以；否则把图放在落地页。
老师会收吗？
实验报告与展板里有轴、单位、来源一行就可以。
WCAG 对比检查把值编码为前景和背景的亮度差。WCAG 对比度； APCA 研究 (Myndex) 作为下一代模型。
工作报告、广告与作业中适合「UI 类型、幻灯片标题、海报标题、徽章标签」。若「单独判断品牌色调而不测量配对」，换一种形式。
软件
- Color.js — 在浏览器或 Node.js 中计算对比度和颜色空间。 · MIT · github.com/color-js/color.js
- APCA (SAPC) — 现代显示器的感知对比度模型 - 在发货前阅读许可证。 · AGPL-3.0 · github.com/Myndex/SAPC-APCA
- Leonardo — 生成具有对比目标的可访问主题坡度。 · Apache-2.0 · github.com/adobe/leonardo
- Bootstrap a11y docs — 文档化的对比指南随庞大的 UI 工具包一起提供。 · MIT · github.com/twbs/bootstrap
- Atlas SVG examples — 您可以在关闭 JavaScript 的情况下阅读服务器渲染的示例。 · CC0 examples · github.com/Tool-Lifes/viz-atlas
导出
- 导出 1 — SVG
- 导出 2 — PDF
- 导出 3 — 把 EMF/SVG 放进幻灯（不要截图）
- 导出 4 — 网页用 SVG，印刷用 PDF
无障碍
- 无障碍 1 — 不要只靠色相。叠上纹理、标签和位置。
- 无障碍 2 — 正文对比 4.5:1，大标记 3:1。
- 无障碍 3 — 图上写短替代文本。数字也做成 HTML 表。
- 无障碍 4 — 动效只用于强调。尊重 prefers-reduced-motion。
WCAG 对比检查：守住前景和背景的亮度差，「单独判断品牌色调而不测量配对」时换图。