白色背景上的浅灰色文本乍一看看起来优雅而简约，但对于有视觉障碍、屏幕上有强烈阳光或在工作日结束时只是普通眼睛疲劳的用户来说，完全无法阅读。颜色对比度是可访问性中最具“技术性”的标准之一——需要满足确切的数字——但它也是最容易提前测试和修复的标准之一。
简而言之 — 本指南涵盖的内容
WCAG 需要什么比率
WCAG 将对比度定义为 1:1（完全没有对比度 — 相同颜色）和 21:1（最大可能对比度 — 纯黑加纯白）之间的数字。 AA 级（大多数地方的强制级别，包括以色列），要求常规文本与其背后的背景之间的比例至少为 4.5:1。在更严格的 AAA 级别，要求升至 7:1。
为什么允许大文本对比度较低
即使对比度较低，大文本也能保持可读性，因此 WCAG 设置了一个更简单的阈值：AA 级为 3:1（而不是 4.5:1），AAA 级为 4.5:1（而不是 7:1）。 “大文本”定义为 18 磅或更大（约 24 像素）的文本，如果是粗体，则为 14 磅或更大（约 18.7 像素）。例如，大标题可以“承受”比常规正文段落稍低的对比度，但仍然满足要求。
如何在实践中检查对比度
无需手动计算 - WebAIM Contrast Checker 等免费工具可让您输入文本和背景颜色代码，并立即获得每个级别的准确比例和通过/失败分数。不仅值得检查纯色背景上的文本，还值得检查背景图像或渐变上的文本 - 其中同一图像的不同区域之间的对比度可能会有所不同，因此最好测试最“有问题”的点。
💡实用技巧
不仅仅是文本：相同的对比度要求（更简单的阈值，3:1）也适用于图形 UI 组件，例如表单字段轮廓、功能图标和按钮边框 - 不仅适用于字母。
如何提前选择可用的调色板
最有效的方法是在模板设计阶段检查对比度，而不是单独检查每个文档。在为标题、正文和链接选择品牌颜色时，值得提前确认您实际使用的每个文本-背景组合至少满足 4.5:1 的要求。这样，从模板创建的每个新文档都会自动“继承”适当的对比度，而不是在编写每个文档后单独检查每个文档。