对比度检查（WCAG标准） 使用指南

<p><strong>输入：</strong>前景 #767676、背景 #FFFFFF。</p><p><strong>处理：</strong>按 WCAG 相对亮度算对比度。</p><p><strong>输出：</st…

核心功能

• 按 WCAG 2.1 计算前景色与背景色的对比度比率
• 同时判定 AA / AAA 在正常文字与大号文字下的四档合规结果
• 支持取色器与手输 HEX，并可一键交换前景与背景
• 纯本地计算，不上传任何输入

适用场景

• 核查两色对比度是否达 WCAG。
• 校验输入数值是否在合理范围。
• 做提交前的快速自检。

使用步骤

1. 输入前景色（文字色）与背景色，可用取色器或直接填 HEX
2. 读取对比度比值（如 14.68:1）
3. 核对 AA（正文 ≥4.5:1）与 AAA（正文 ≥7:1）是否通过
4. 若未达标，调整明度后重新取值直到通过
5. 如需反色方案，点击交换按钮再核一次

实用技巧

• 大号文字（≥18px 或 ≥14px 粗体）阈值放宽到 3:1（AA）与 4.5:1（AAA），不要一律按 4.5 卡
• 对比度只算相对亮度，相同的比值不代表观感一致，红色与蓝色的可读性差异仍需实测
• 半透明文字需先与底色合成实色再计算，直接拿 RGBA 值算会偏高
• 装饰性文字、禁用态与 Logo 不受 WCAG 对比度要求约束

常见问题

AA 和 AAA 怎么选？

普通文本 AA 需 ≥4.5:1、AAA ≥7:1；大文本阈值更低。结果以浏览器实时计算为准，纯前端本地处理、数据不上传；生成的样式与代码仅作快速产出参考，正式项目请以设计系统、规范与浏览器实测为准。

生成的代码/图片能直接用吗？

可直接复制使用，建议粘到项目后在浏览器实测微调；本工具只生成不托管。

会保存或上传我的内容吗？

结果以浏览器实时计算为准，纯前端本地处理、数据不上传；生成的样式与代码仅作快速产出参考，正式项目请以设计系统、规范与浏览器实测为准。