什么是对比度检测（WCAG）？
对比度检测工具按 WCAG 标准计算前景色与背景色的对比度比值，并判定是否达到 AA（4.5:1）与 AAA（7:1）级别，大号文字按 3:1 与 4.5:1 判定。计算在浏览器内完成。
怎么用对比度检测（WCAG）？
- 1分别设置前景（文字）与背景颜色。
- 2查看对比度比值与 AA / AAA 判定结果。
- 3用预览区确认实际观感，小字号更依赖高对比度。
- 4未达标时优先调整亮度，而不是加粗或加大字号。
在代码里怎么实现？
一次性操作用上面的工具，重复性工作建议固化到脚本或项目里。
JavaScript
// WCAG 相对亮度
const luminance = ({ r, g, b }) => {
const f = (c) => {
const s = c / 255;
return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
};
return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);
};
const ratio = (a, b) => {
const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
return (hi + 0.05) / (lo + 0.05);
};常见问题
WCAG AA 和 AAA 的标准分别是多少？+
正文文字 AA 要求对比度不低于 4.5:1，AAA 要求不低于 7:1。18pt 以上或 14pt 加粗的大号文字放宽为 AA 3:1、AAA 4.5:1。图形与界面控件的边界至少需要 3:1。
灰色文字为什么容易不达标？+
浅灰在白底上的相对亮度差很小，比如 #999 配白底只有约 2.8:1，远低于 4.5:1。设计上想弱化次要信息时，更稳妥的做法是缩小字号或减少字重，而不是把颜色调淡到不可读。