当前对比度
4.02:1
标题文字 (Large Text)
这是一个实时预览区域。您可以观察当前选取的颜色组合在实际排版中的视觉效果。对比度越高，文字就越容易被辨认。
普通文本 (AA 级)
达标
普通文本 (AAA 级)
不通过
大文本 (AA 级)
达标
大文本 (AAA 级)
不通过
为什么对比度对 Web 无障碍（A11y）至关重要？
容易被忽视的问题
设计师往往倾向于使用柔和、低饱和度的配色来追求“高级感”。然而，对于视力受损或在强光环境（如户外使用手机）下的用户来说，低对比度的文本几乎是不可读的。
无障碍设计标准
Web 内容无障碍指南（WCAG）提供了一套量化的标准。通过数学计算色彩的相对亮度，我们可以客观地评估内容的易读性，从而确保信息能够传达给每一位用户。
WCAG 2.1 对比度标准详解
-
AA 级 (最小对比度)
:
- 普通文本（18pt 或 14pt 加粗以下）：对比度至少达到 4.5:1 。
- 大文本（18pt 或 14pt 加粗以上）：对比度至少达到 3:1 。
-
AAA 级 (增强对比度)
:
- 普通文本：对比度至少达到 7:1 。
- 大文本：对比度至少达到 4.5:1 。
对比度是如何计算的？
对比度的计算基于颜色的 相对亮度（Relative Luminance） 。相对亮度是色彩空间中相对归一化到 0（最暗黑）到 1（最亮白）的亮度值。计算公式如下：
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
其中 L1 是较亮颜色的相对亮度，L2 是较暗颜色的相对亮度。由于公式中加入了 0.05 的偏移值，对比度的范围从 1:1（完全相同）到 21:1（黑白极限对比）。
设计师的建议
在项目初期就引入对比度检查。不要等到设计完成后再去修改，因为这可能会破坏已经建立的视觉平衡。使用本工具可以快速调整色彩的明度（Value），在保持品牌色相（Hue）的同时，找到符合无障碍要求的平衡点。记住，良好的对比度不仅服务于残障人士，也能显著提升所有用户的阅读体验和效率。