颜色对比度检查

功能说明

颜色对比度检查工具用于检测前景色（文字）与背景色之间的对比度是否符合 WCAG（Web内容无障碍指南）标准。良好的对比度确保所有用户（包括视力障碍者）都能清晰阅读内容。

本工具遵循 WCAG 2.1 AA/AAA 级别标准，支持大号文本和普通文本两种检测标准，帮助设计师和开发者创建更友好的无障碍网页。

所有计算在浏览器本地完成，不会上传任何颜色数据。

使用步骤

1. 使用颜色选择器或直接输入十六进制色值选择前景色（文字颜色）和背景色。

2. 实时查看对比度比值、WCAG通过/失败状态。

3. 预览区域显示大号文本和普通文本的实际效果。

4. 调整颜色直至符合无障碍标准。

常见问题

什么是对比度？

对比度是两种颜色之间亮度差异的比值，范围从1:1（无对比度）到21:1（完全对比度，如黑白）。

WCAG AA 和 AAA 有什么区别？

AA 是基本无障碍标准（普通文本 ≥4.5:1，大文本 ≥3:1），AAA 是增强标准（普通文本 ≥7:1，大文本 ≥4.5:1）。

对比度怎么计算？

对比度 = (L1 + 0.05) / (L2 + 0.05)，其中 L1 是较亮颜色的相对亮度，L2 是较暗颜色的相对亮度。相对亮度根据 WCAG 2.1 定义的公式计算。

你可能还想问

对比度多少才算达标？

按无障碍规范：正文文字与背景对比度至少 4.5:1（AA 级），大号文字可放宽到 3:1；不达标会影响色弱用户与强光环境下的可读性。

为什么浅灰字看起来时尚但不合规？

浅灰配白底对比度常在 2:1 上下，视觉上「高级」但可读性差；折中办法是保留灰色质感同时把明度压深，或用较大字号与加粗提高识别度。

只考虑黑白就够了吗？

不够。彩色文字也要逐个检查（尤其是品牌色按钮上的白字），还要避免仅靠颜色区分信息（红绿提示需配图标或文字），这才是完整的无障碍实践。

相关工具

相关内容