对比度检查器
选择文字颜色和背景颜色，即可查看精确的 WCAG 对比度，以及是否通过 AA 或 AAA 标准。
大号文字预览（18pt 以上）
正常文字预览，也就是大多数正文使用的字号。
标识含义说明
根据 WCAG 2.1，要达到 AA 标准，正常文字需要 4.5:1 的对比度，大号文字（18pt 以上，或加粗 14pt 以上）需要 3:1。AAA 标准更严格：正常文字需要 7:1，大号文字需要 4.5:1。
工作原理
对比度使用 WCAG 的真实相对亮度公式计算，而不是近似值。每个通道先除以 255，再通过反 sRGB 伽马曲线线性化：小于等于 0.03928 的值除以 12.92，其余的通过 ((c + 0.055) / 1.055)^2.4 计算。线性化后的通道按 0.2126（红）、0.7152（绿）、0.0722（蓝）加权，反映了人眼对每种颜色亮度感知的贡献程度。对比度为 (较亮 + 0.05) / (较暗 + 0.05)，取值范围从纯色相同时的 1:1 到纯黑对纯白时的 21:1。
“大号文本”有一个很少被准确引用的精确定义：18pt（约 24px）常规字重，或 14pt（约 18.7px）粗体。这就是为什么 3.2:1 的配色对标题可能完全合规，对正文却是不合格的。公式是对称的：交换前景色和背景色永远不会改变比值，所以交换按钮只是为了预览。一个诚实的局限：这个比值只衡量亮度差异，红色配绿色在纸面上可能超过 4.5:1，但对色觉缺陷人群来说仍然很难分辨。
两种颜色的每次变化都会在页面的 JavaScript 中即时完成计算。没有任何颜色值会被发送到任何地方，你可以在拖动取色器时通过开发者工具的网络面板验证。
常见问题
AA 和 AAA 有什么区别？
AA 是大多数网站的基础目标：正常文字要求 4.5:1，大号文字（18pt 以上，或加粗 14pt 以上）要求 3:1。AAA 标准更严格，主要面向视力较弱的用户：正常文字 7:1，大号文字 4.5:1。
这个工具只检查纯色，还是也能检查图片？
只检查两种纯色，也就是文字颜色和背景颜色。如果文字叠加在照片或渐变背景上，应该分别针对它可能出现的最深和最浅区域检查对比度。
这和浏览器、审计工具用的公式一样吗？
是的。这里使用的是标准的 WCAG 2.1 相对亮度和对比度公式，与 Lighthouse 和 axe 使用的公式相同。
来自博客： WCAG 对比度检查：实用指南