按 WCAG 标准检查颜色对比度
计算文字颜色与背景色之间的 WCAG 对比度，并显示它在正常字号和大字号下是否达到 AA 与 AAA。这个比值基于相对亮度，与两个色相看起来差多少无关。
大号文字示例正文文字，用的是大多数界面实际会用的字号。
5.85:1
对比度。WCAG 量的是相对亮度，而不是两个色相看起来差多少。
- AA —— 正常字号通过 · 需要 4.5:1
- AA —— 大字号（18pt 以上）通过 · 需要 3:1
- AAA —— 正常字号未通过 · 需要 7:1
- AAA —— 大字号通过 · 需要 4.5:1
如何使用
- 1设定文字颜色和背景颜色。
- 2读对比度数值，以及 AA 和 AAA 的通过 / 不通过标记。
- 3看下方的实时示例，感受这个数值实际长什么样。
常见问题
- 要多少才算通过？
- 正文按 AA 要 4.5:1，绝大多数无障碍要求点名的就是这一级。大字号——18pt，或 14pt 加粗——只要 3:1。AAA 则把这两个数提到 7:1 和 4.5:1。
- 我看着挺清楚的一组配色，为什么不通过？
- 对比度是按相对亮度算的，不是按两个色相看起来差多少。白底橙字在眼里对比强烈，分数却很难看，因为两者都亮。这个落差正是要点：这项测试是为那些眼睛不像你这样分辨色相的读者设的。
- 图标和边框也要满足这个比值吗？
- 界面控件和承载信息的图形，相对其背后要 3:1。纯装饰的形状，以及作为 logo 一部分的文字，不在要求内。
- 不动品牌色的前提下，怎么把不达标的一组救回来？
- 调亮度，不要动色相。把文字压暗、或者把背景提亮，能很快改变比值，同时颜色仍然认得出来——而且通常背景那边的余地更大。