👁️对比度检测
基于 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 官方文档。
❓ 常见问题
什么是WCAG对比度标准？
WCAG（Web Content Accessibility Guidelines）是网页内容无障碍指南，由W3C制定。对比度标准规定了文本与背景之间应有的最小颜色差异，确保视力障碍用户也能清晰阅读网页内容。
WCAG AA和AAA有什么区别？
AA级是基本合规要求，普通文本对比度至少4.5:1，大文本至少3:1；AAA级是更高标准，普通文本至少7:1，大文本至少4.5:1。大多数网站满足AA级即可，AAA级适用于对可访问性要求极高的场景。
对比度不达标会有什么影响？
对比度不足会导致低视力用户、老年用户难以阅读网页内容，影响用户体验。在某些国家和地区，网站无障碍合规是法律要求，对比度不达标可能面临合规风险。
如何提高颜色对比度？
可以通过加深文字颜色、减淡背景颜色，或选择对比度更高的颜色组合来提高对比度。本工具提供实时预览，帮助你快速找到既美观又达标的颜色搭配。