对比度检查器测量什么?
对比度检查器比较前景色和背景色的相对亮度。结果以比率显示,从 1:1(颜色在视觉上相同)到 21:1(黑与白具有最大对比度)。
该工具报告 WCAG 风格的普通文本和大号文本的通过/未通过 指示。它适用于早期设计决策、组件状态、主题令牌,以及在更完整的可访问性审查之前的快速检查。
如何解读结果
| Check | 最低比率 | Meaning |
|---|---|---|
| AA 普通文本 | 4.5:1 | 常见目标,适用于正文文本。 |
| AA 大号文本 | 3:1 | 适用于字形更易辨认的较大或较粗的文本。 |
| AAA 普通文本 | 7:1 | 适用于高可访问性场景中常规文本的更严格目标。 |
| AAA 大号文本 | 4.5:1 | 适用于大号文本的更严格目标。 |
此工具不能证明的内容
比率是一个强烈的信号,但并不能替代完整的可访问性审计。真实的可读性还取决于排版、字体粗细、悬停/焦点状态、禁用状态、周围颜色、屏幕质量,以及文本是否出现在图像或渐变之上。
- 透明度和渐变需要单独评估。
- 小图标和细线条可能需要比附近文本更强的对比度。
- 品牌色在一种配色中可能通过,而在另一种配色中失败。
- QR 扫描对比度与文本可读性对比度相关但并非相同的检查。
改善较弱对比度的方法
使前景变暗
对于浅色背景,将文本颜色调整为更深的中性色或更强的品牌色。
使背景更亮
轻微调整背景即可使品牌颜色在不更改前景令牌的情况下通过。
增加文本大小或字重
较大或更粗的文本的 AA 门槛更低,但仍需足够的可视分离度。
检查每种状态
悬停、焦点、禁用、选中和错误状态通常使用不同的颜色对。
常见问题解答
这是完整的 WCAG 合规性审计吗?
不。它计算颜色对的 WCAG 风格对比阈值。完整的审查还会检查布局、键盘行为、语义、焦点状态、文本替代项和真实渲染的排版。
什么算作大号文本?
WCAG 指南将大号文本大致定义为 18pt 常规文本或 14pt 粗体及以上。在网页工作中,请核实实际渲染的大小和字重,而不仅仅依赖设计标签。
我可以将其用于透明颜色吗?
此紧凑型检查器使用不透明的 sRGB 颜色。如果您的 UI 使用透明度,请先混合最终渲染的前景和背景颜色,然后检查所得的配对。
通过 AA 是否意味着设计始终可读?
不一定。非常细的字体、小的 UI 标签、杂乱的背景和低质量显示器仍可能使文本难以阅读。将比率视为一个重要的信号。
这与 QR 码对比度相同吗?
不是。QR 码对比度会影响扫描器的可靠性,而该工具侧重于文本可读性阈值。数学关系相似,但实际决策不同。