👁️对比度检测
基于 WCAG 2.1 标准检测前景色与背景色的对比度，自动评估 AA / AAA 合规性，助力无障碍设计，让内容对所有用户都清晰可读。
🔤 前景色
文本 / 图标
rgb(15, 23, 42)
🟦 背景色
页面 / 容器
rgb(255, 255, 255)
📊 对比度比率
21.00
: 1
0
3:1
4.5:1
7:1
21:1
✅ WCAG 2.1 合规性
AA
通过
≥ 4.5:1
AAA
通过
≥ 7:1
大文本
通过
AA ≥ 3:1 · AAA ≥ 4.5:1
👁️ 实时预览
（展示对比度效果）
奇遇网
对比度检测 · 无障碍设计
前景 #0F172A · 背景 #FFFFFF
⏳ 等待操作…
💡 使用说明
- 通过 颜色选择器 或 HEX 输入框 分别设置前景色（文本/图标）和背景色（页面/容器）。
- 工具会 实时计算 对比度比率，并显示 WCAG 2.1 AA / AAA 合规性评估结果。
- AA 级别：常规文本 ≥ 4.5:1，大文本 ≥ 3:1；AAA 级别：常规文本 ≥ 7:1，大文本 ≥ 4.5:1。
- 点击 🔄 交换颜色 可快速互换前景色与背景色，便于多场景测试。
- 点击 📋 示例配色 可体验不同对比度场景（高/中/低对比度）。
- 点击 📋 复制结果 可一键复制对比度数据和合规状态，方便记录与分享。
- 所有处理均在浏览器本地完成，不会上传任何数据，保护你的设计隐私。
💡
提示： WCAG 2.1 是国际通用的无障碍设计标准。使用本工具检测你的配色方案，确保内容对所有用户（包括色弱、低视力人群）都清晰可读。更多信息可参考 WCAG 官方文档。