对比度检查
检查前景与背景颜色的 WCAG 对比度评级。
前景色
背景色
大号文本 24px+
正常文本示例段落。
小号文本示例。
对比度
3.68 : 1
WCAG 等级
AA 正常文本: 不通过
AA 大号文本: 通过
AAA 正常文本: 不通过
AAA 大号文本: 不通过
隐私安全全部在浏览器本地完成，数据不上传
简单易用粘贴或输入即可，结果实时呈现
永久免费不限次数，无需注册
快速高效先进技术，处理高效稳定
文字要易读，文字和背景之间就得有足够的对比，而无障碍规范给这件事定了确切的数字。输入前景色和背景色，即可得到对比度比值，以及它对正常文字和大号文字是否通过 WCAG 的 AA 和 AAA。
使用步骤: 对比度检查
- 1输入内容设置前景(文字)颜色,可取色或输入 HEX 值。
- 2设置选项再设置背景颜色。
- 3开始处理查看计算出的对比度比值与示例文本预览。
- 4获取结果对照 AA / AAA 评级判断是否通过无障碍标准。
常见用途
检查文字可读性看看你的文字颜色是否从背景里足够凸显。
通过审查在评审前确认一组搭配达到 WCAG 的 AA 或 AAA。
挑一组安全搭配调整其中一个颜色，直到比值越过门槛。
测按钮或链接确认可交互的文字也易读，而不只是正文。
使用提示
门槛，简而言之WCAG 的 AA 要求正常文字 4.5:1、大号文字 3:1；AAA 要求 7:1 和 4.5:1。大号大致指 18 磅，或 14 磅加粗。
对比度不是无障碍的全部比值达标有帮助，但易读的字号、清晰的聚焦状态、以及不只靠颜色传达信息，也都同样重要。
大号文字门槛更低更大或加粗的文字更易读，因此在更低的比值下也能通过。在依赖这一点之前，先确认你的文字确实算大号。
测真实呈现的颜色检查前景和背景实际渲染出来的样子，把任何不透明度也算进去，而不是看标称的色块。