对比度检测

📖 工具介绍

对比度检测是一款面向无障碍设计与前端开发的在线可读性校验工具，严格按照 W3C Web 内容无障碍指南 WCAG 2.1 的相对亮度公式，计算任意前景色与背景色组合之间的对比率，并据此判定是否达到 AA 与 AAA 两个等级。很多配色看着协调，但文字一放到浅灰背景上就发虚，根源就是对比率不足。本工具先把 sRGB 各通道做伽马线性化，再按 L=0.2126R+0.7152G+0.0722B 加权得到相对亮度，最后用 (L1+0.05)/(L2+0.05) 算出对比率。页面中部是一块实时预览区，用您选定的颜色直接渲染标题与正文，所见即所得；下方大字展示对比率数值，再往下是四张评级卡片，分别对应普通文字 AA/AAA 与大字号 AA/AAA，达标显示绿色通过、不达标显示红色未过。中间的 ⇄ 按钮可一键交换前景与背景，方便快速试错。结果可一键复制，全程离线运行。

✨ 功能特点

• 标准公式：采用 WCAG 相对亮度与对比率公式，结果与权威工具一致
• 四档评级：普通文字 AA/AAA、大字号 AA/AAA 一次给出，一目了然
• 实时预览：标题与正文按真实配色渲染，所见即所得
• 一键交换：⇄ 按钮快速互换前景背景，提高试色效率
• 对比率直读：大字号显示 X.XX : 1，达标线标注在每张卡片上
• 结果复制：一行文字记录前景、背景与对比率，便于贴入设计稿说明

📝 使用方式

1. 用取色器或输入 HEX 设置前景色（文字色）
2. 用取色器或输入 HEX 设置背景色
3. 查看中部预览区，感受真实配色下的文字效果
4. 阅读对比率数值与四张评级卡片，判断是否达标
5. 需要记录时点「复制结果」，或点 ⇄ 交换两色继续测试

⚠️ 注意事项

• 评级门槛：普通文字 AA≥4.5、AAA≥7；大字号 AA≥3、AAA≥4.5
• 大字号定义：通常指 18pt 以上或 14pt 以上加粗文字，具体以规范为准
• HEX 格式：仅接受 #RRGGBB，非法输入会提示而不计算
• 计算精度：对比率保留两位小数，评级按阈值严格判定
• 本地运算：所有亮度与对比率计算均在浏览器完成，不上传任何数据