对比度检查（WCAG标准）
输入前景色和背景色，计算 WCAG 2.1 对比度比率，判定 AA / AAA 合规性
🎨 WCAG Contrast Check
Enter foreground and background colours to compute the WCAG 2.1 contrast ratio and see whether text passes the AA and AAA levels.
📐 计算公式 / 原理
CR = (L₁ + 0.05) / (L₂ + 0.05)，L = 0.2126R + 0.7152G + 0.0722B（sRGB 归一化并线性化后）
依据 WCAG 2.1：先将 sRGB 各通道归一化并按 gamma 线性化，再加权求相对亮度 L，两色亮度各加 0.05 后取比值。CR ≥ 4.5 为 AA（正文）、≥ 7 为 AAA；大字号阈值分别为 3 与 4.5。
大号文字示例 (24px Bold)
中等文字示例 (18px Regular)
小号文字示例 (14px Regular) — The quick brown fox jumps over the lazy dog.
📚 深度解析：对比度检查（WCAG标准）
💡 常见使用场景
- 核查两色对比度是否达 WCAG。
- 校验输入数值是否在合理范围。
- 做提交前的快速自检。
校验 #FFF 与 #767676 对比度
<p><strong>输入：</strong>前景 #767676、背景 #FFFFFF。</p><p><strong>处理：</strong>按 WCAG 相对亮度算对比度。</p><p><strong>输出：</strong>对比度约 4.54:1，达 AA 普通文本。</p>
❓ 常见问题（FAQ）
- AA 和 AAA 怎么选？
- 普通文本 AA 需 ≥4.5:1、AAA ≥7:1；大文本阈值更低。结果以浏览器实时计算为准，纯前端本地处理、数据不上传；生成的样式与代码仅作快速产出参考，正式项目请以设计系统、规范与浏览器实测为准。
- 生成的代码/图片能直接用吗？
- 可直接复制使用，建议粘到项目后在浏览器实测微调；本工具只生成不托管。
- 会保存或上传我的内容吗？
- 结果以浏览器实时计算为准，纯前端本地处理、数据不上传；生成的样式与代码仅作快速产出参考，正式项目请以设计系统、规范与浏览器实测为准。
⚠️ 使用说明与注意事项
- 对比度计算遵循 WCAG 2.1 标准（W3C Web Content Accessibility Guidelines）
- AA 级要求：正常文字 ≥ 4.5:1，大号文字（≥18px 或 ≥14px 粗体）≥ 3:1
- AAA 级要求：正常文字 ≥ 7:1，大号文字 ≥ 4.5:1
- 输入色值支持 #RRGGBB、#RGB、rgb(r,g,b) 格式
- 对比度比率范围为 1:1（完全相同）到 21:1（黑白对比）
▼
工具简介
WCAG 2.1 对比度检查器，输入前景色和背景色即可计算对比度比率，判定 AA / AAA 无障碍标准合规性，帮助设计师和开发者确保文字可读性。
功能特点
- 支持色值输入和取色器双模式
- 实时预览文字效果
- AA / AAA 双标准合规判定
- 一键复制检测结果
使用场景
- 网页配色方案无障碍检查
- UI 设计文字可读性验证
- 品牌色搭配合规性审查
- 无障碍认证辅助工具