颜色对比度检测
本工具用于检测前景色与背景色之间的对比度是否满足 WCAG 无障碍标准。您只需在下方输入或选择两种颜色（支持十六进制、RGB、HSL 格式），然后点击「开始检测」按钮，系统会立即计算出对比度数值，并给出 AA 或 AAA 级别的通过评级。检测结果会显示在下方结果区域，同时提供实时预览效果。整个过程完全在浏览器本地运行，您的颜色数据不会上传到任何服务器。
注意事项
- 对比度计算基于 WCAG 2.1 标准中的相对亮度公式，适用于普通文本、大文本（18pt 或 14pt 加粗以上）及图形组件的对比度评估。
- 本工具支持 HEX（#RGB、#RRGGBB）、RGB（rgb(r,g,b)）、RGBA（alpha 会被忽略）、HSL（hsl(h,s%,l%)）格式输入，其他格式可能无法解析。
- 所有计算均在您的浏览器本地完成，颜色数据不会上传到任何服务器，可放心使用。
- 对于半透明颜色，建议先与背景混合后再输入，因为本工具不处理 alpha 通道的叠加计算。
- 检测结果仅供参考，实际设计时还需考虑字体大小、字重、周围环境光等因素。
怎么用
- 在「前景色」输入框中输入文字颜色，或点击右侧色板直接选取颜色；也可以点击下方快捷按钮快速设置常见颜色。
- 在「背景色」输入框中输入背景颜色，同样支持手动输入或色板选取。
- 点击「开始检测」按钮，系统会立即计算并显示对比度数值与 WCAG 评级。
- 查看下方结果区域中的详细评级列表，了解是否符合 AA 或 AAA 标准；预览框会实时展示实际效果。
- 如需调整，可点击「交换颜色」快速互换前景与背景，或点击「重置」恢复默认值。
常见问题
什么是对比度？为什么重要？
对比度是前景色与背景色之间亮度差异的数值比例，数值越高越容易辨认。WCAG 无障碍标准要求文本与背景达到一定对比度，确保低视力用户也能清晰阅读。
AA 和 AAA 有什么区别？
AA 是基本无障碍标准，普通文本需 4.5:1，大文本需 3:1；AAA 是增强标准，普通文本需 7:1，大文本需 4.5:1。AAA 更严格，适合对可读性要求高的场景。
为什么我输入的颜色解析失败？
请检查颜色格式是否为 HEX（如 #ff0000）、RGB（如 rgb(255,0,0)）或 HSL（如 hsl(0,100%,50%)）。注意 RGB 值范围是 0-255，HSL 的饱和度与亮度是百分比。
这个工具需要联网吗？
完全不需要。所有计算逻辑都在您的浏览器本地运行，没有任何网络请求，您的颜色数据不会离开您的设备。