颜色对比度检测（WCAG）
选择文字颜色和背景颜色，立即显示对比度和无障碍标准检测结果。
输入的文字和文件不会发送到服务器，只在本浏览器中处理。
对比度
- 普通文字 AA (4.5:1)-
- 普通文字 AAA (7:1)-
- 大号文字 AA (3:1)-
- 大号文字 AAA (4.5:1)-
- 界面组件和图形 AA (3:1)-
大号文字指 24px 及以上，粗体约 18.7px 及以上。
效果预览
大标题看起来是这样
正文文字的对比度至少要 4.5:1 才便于阅读。也请在小屏幕或强光环境下看看效果。
小号提示文字 · 13px
输入框
达标颜色建议
修改文字颜色 -
修改背景颜色 -
使用方法
- 用色块选择文字颜色和背景颜色，或输入 #fff、rgb(…) 等颜色代码。半透明颜色会按叠加到背景上的效果计算。
- 页面会显示对比度，以及普通文字（4.5:1）、大号文字（3:1）、界面组件（3:1）的 AA 和更严格的 AAA 检测结果。
- 未达标时，“达标颜色建议”会给出色相不变、只调整亮度的最接近颜色，点击“应用”即可替换。
- 网址中包含这两种颜色，可以直接复制链接分享给团队成员。
常见问题
AA 和 AAA 是什么意思？
它们是 WCAG（Web 内容无障碍指南）的等级。普通文字的 AA 标准为 4.5:1，AAA 标准为 7:1。我国的信息无障碍相关标准也参考了 WCAG 的这些要求。
对比度是怎么计算的？
先求出两种颜色的相对亮度，再按（较亮者 + 0.05）÷（较暗者 + 0.05）计算。相同颜色为 1:1，黑白为 21:1。为避免略低于标准的值看起来像通过，结果从小数第三位起直接舍去。
界面组件的标准什么时候用？
按钮边框、输入框边线、图标等非文字元素，只要与相邻颜色的对比度达到 3:1 即可（WCAG 1.4.11）。