颜色对比度检查器

Web 内容无障碍指南（WCAG）2.1 由 W3C 发布，定义了最低对比度比率以确保有视觉障碍的人能阅读文本。指南指定了三个合规级别：A（最低）、AA（标准）和 AAA（增强）。对于 AA 级，要求普通文本（18pt 以下或 14pt 粗体以下）4.5:1，大文本（18pt+ 或 14pt+ 粗体）3:1。对于 AAA 级，要求更严格：普通文本 7:1，大文本 4.5:1。

对比度比率使用两种颜色的相对亮度计算。相对亮度是线性化 RGB 通道的加权和：L = 0.2126*R + 0.7152*G + 0.0722*B，其中 R、G 和 B 是伽马校正后的值。对比度比率为 (L1 + 0.05) / (L2 + 0.05)，其中 L1 是较浅的颜色，L2 是较深的颜色。0.05 的偏移量考虑了屏幕上的环境光照射。

这些要求并非随意设定——它们基于对人视觉的大量研究。约 8% 的男性和 0.5% 的女性有某种形式的色觉缺陷（色盲）。低对比度不仅影响这些用户，还影响在强阳光下、低质量显示器上或斜角观看屏幕的任何人。满足 WCAG AA 对比度要求可改善所有人的可读性，而不仅是有障碍的用户。在许多司法管辖区（欧盟、美国 ADA），WCAG 合规是面向公众网站的法律要求。

最常见的对比度错误是在白色背景上使用浅灰色文字。常见的设计趋势使用 #999 或 #AAA 灰色文字作为辅助信息，但这些颜色的对比度比率分别为 2.85:1 和 2.32:1——远低于 4.5:1 的最低要求。白色背景上的辅助文字请使用 #767676（4.54:1）或更深的颜色。另一个常见问题是使用视觉上好看但对比度检查失败的品牌颜色——品牌的浅蓝色（#00BFFF）在白色背景上的比率为 2.32:1，不通过 WCAG AA。为文字使用加深品牌颜色，或仅用于非文字元素（边框、背景、图标）。

对于大文本（标题、按钮），3:1 的要求更宽松，但不要滥用。勉强通过 3:1 的大文本对许多用户来说仍然难以阅读。尽可能以 4.5:1 为目标，无论文本大小。使用彩色背景时，测试文字颜色以及可能出现在悬停或焦点状态上的任何文本。CSS 自定义属性（变量）使维护一致的对比度更容易——使用经过对比度测试的颜色对定义调色板，并在整个设计系统中重用。