本文目录
什么是色彩对比度，它为何重要
色彩对比度是指两种颜色之间的亮度差异，通常是前景文字与其背景之间的差异。充足的对比度能确保文字对每个人都清晰可读，包括低视力或色盲人士。对比度不足会让内容难以阅读甚至无法阅读，将数以百万计的用户拒之门外。
《Web 内容无障碍指南》（WCAG）定义了最低对比度比值，以确保在各种视觉能力下都能保持可读性。达到这些标准不仅是良好实践——在许多司法管辖区，根据 ADA、EAA 和 EN 301 549 等无障碍法律，它更是一项法律要求。
WCAG 对比度比值的工作原理
WCAG 使用相对亮度来计算两种颜色之间的对比度比值。该公式得出的比值范围从 1:1（无对比，颜色相同）到 21:1（最大对比，白底黑字）。
- 相对亮度由线性化的 sRGB 值通过以下公式计算得出：L = 0.2126R + 0.7152G + 0.0722B
- 对比度比值为 (L1 + 0.05) / (L2 + 0.05)，其中 L1 为较浅的颜色，L2 为较深的颜色
- 普通文字（小于 18pt，或 14pt 加粗）需达到至少 4.5:1 才符合 AA，7:1 才符合 AAA
免费试用 —— 无需注册
检查色彩对比度 →理解 WCAG AA 与 AAA 合规级别
WCAG 为色彩对比度定义了两个符合性级别。AA 级是大多数无障碍法规所要求的最低标准，而 AAA 级则为视力障碍更严重的用户提供更强的无障碍保障。
- AA 级普通文字——对于小于 18pt（或 14pt 加粗）的文字，需达到至少 4.5:1 的对比度比值
- AA 级大号文字——对于 18pt 及以上（或 14pt 加粗及以上）的文字，需达到至少 3:1
- AAA 级普通文字——需达到至少 7:1，以实现最高级别的可读性
- AAA 级大号文字——在增强级别下，大号文字需达到至少 4.5:1
- 非文本对比度——UI 组件和图形对象与相邻颜色之间需达到至少 3:1
无障碍色彩设计技巧
在设计时兼顾无障碍性，并不意味着要牺牲美感。以下实用技巧能帮你打造出人人可用的精美设计。
- 从对比度入手——先确定文字和背景颜色，再围绕它们构建整套配色方案
- 切勿仅依赖颜色——在颜色之外，搭配图标、图案或标签来传达含义
- 用真实内容测试——占位文字看起来或许没问题，但不同长度的实际内容可能暴露出对比度问题
- 单独考虑深色模式——在浅色模式下通过的颜色可能在深色模式下失败，反之亦然
- 使用对比度检查工具——自动化工具比人工检查更快发现问题，并能防止倒退
常见问题
符合 WCAG 的最低对比度比值是多少？
对于 WCAG 2.1 AA 级，普通文字需达到至少 4.5:1 的对比度比值，大号文字（18pt 或 14pt 加粗）需达到至少 3:1。AAA 级则将这两项分别提高到 7:1 和 4.5:1。大多数无障碍法律都以 AA 级作为最低标准。
色彩对比度对图片和图标也重要吗？
重要。WCAG 2.1 成功准则 1.4.11 要求 UI 组件和图形对象与相邻颜色之间达到至少 3:1 的对比度。这包括图标、表单字段边框、焦点指示器和图表元素。装饰性图片则不受此限制。
如何在不改变品牌色的前提下修复低对比度？
你可以在保持相同色相和饱和度的同时调整品牌色的明度。例如，把浅蓝色调暗用于文字，或把深色背景调亮。另一种方法是将品牌色用于对比度要求较低的大型装饰元素，而正文文字则使用高对比度的中性色。