颜色对比度检查器 (WCAG)

检查两种颜色是否满足 WCAG 2.1 最低对比度要求。

对比度与可访问性

WCAG（Web内容可访问性指南）规定了可读文本的最低对比度。AA 级——多数网站对标的标准——要求普通文字达到 4.5:1，大号文字（18pt 及以上，或 14pt 粗体）达到 3:1。AAA 级更严格，要求 7:1。不达标会让视力较弱或屏幕较旧的用户难以阅读您的网站。

对比度并不直观。黑底红字看起来也许很醒目，但实际只有5.25:1——勉强达到AA。而现代"极简"设计中常见的白底浅灰，往往根本不合格。本计算器会显示对比度数值，以及每组颜色分别通过了哪些WCAG级别。

什么是 WCAG，它的对比度要求是什么？

WCAG（Web内容可访问性指南）是 Web 可访问性的标准。对比度要求：AA 级要求普通文字对比度达到4.5:1，大号文字（18pt 及以上，或 14pt 粗体）达到3:1。AAA（更严格）则分别要求7:1和4.5:1。大多数网站以 AA 为目标。

对比度是怎么计算的？

通过比较两种颜色的相对亮度：对比度 = (L1 + 0.05) / (L2 + 0.05)，其中 L1 是较亮色，L2 是较暗色。黑底白字为21:1（最大值）。纯红 (#FF0000) 放在纯黑上只有5.25:1——红色在视觉上比您直觉想的要暗。

为什么有些配色看上去没问题，却不达标？

您的眼睛会适应环境。在光线好、视力正常的情况下，灰底灰字可能看着还不错，但对低视力用户、老显示器、阳光反光或色盲用户来说就失败了。WCAG 的比值是能覆盖最广人群的下限——不是"我看着还行"的标准。

非文字元素怎么办？

WCAG 2.1 增加了1.4.11条：UI 组件和图形对象相对相邻颜色的对比度需要达到3:1。这包括表单边框、图标、图表和焦点指示器。白底上细浅灰边框就不达标——这是现代极简设计里常见的问题。