WCAG 颜色对比度检查器

为什么颜色对比度值得单独检查

颜色对比度（Color Contrast）衡量的是前景（通常是文字）与背景之间在亮度上的差异程度。差异越大，文字越容易辨认；差异越小，文字就「融进」背景里，读起来费力。对视力正常的人来说，低对比只是在强光下或快速扫读时有点吃力；但对色弱、色盲、低视力人群，以及使用手机反光屏幕的户外用户，低对比可能直接导致内容完全无法阅读。

正因如此，Web 内容无障碍指南（WCAG）把对比度列为可量化的硬性指标。它不是「好不好看」的主观审美，而是「能不能被读到」的功能底线。一个再精美的设计，如果正文对比度不达标，对相当一部分用户而言就是失效的设计。

相对亮度与 21:1 的由来

WCAG 用「相对亮度」（Relative Luminance）来描述颜色的明暗。它不是简单的 RGB 平均值，而是先对每个通道做伽马线性化，再按人眼对不同颜色的敏感度加权求和：

• 线性化：把 sRGB 的 0–255 通道值先归一化，再按阈值分段做幂运算，还原出真实的物理亮度。
• 加权：人眼对绿色最敏感、对蓝色最不敏感，因此权重是 R 0.2126、G 0.7152、B 0.0722。
• 求比值：对比度 =（较亮者亮度 + 0.05）÷（较暗者亮度 + 0.05）。加 0.05 是为了避免纯黑时除以零。

这样算出的比值范围是 1:1 到 21:1。1:1 表示两色完全相同（白配白），21:1 是极限（纯黑配纯白）。本工具在后台实时执行这套计算，你拖动滑块或改色值的瞬间，比值和合规判定就会刷新。

看懂 AA 与 AAA 这几档门槛

WCAG 把合规分为 AA（基本）与 AAA（增强）两个等级，并对普通文本、大文本、图形组件分别设了门槛：

• AA 普通文本 ≥ 4.5:1：正文、段落最常用的底线，绝大多数网站应至少满足这一档。
• AA 大文本 ≥ 3.0:1：大文本指 18pt（约 24px）以上，或 14pt（约 18.66px）以上且加粗的字。字越大越容易读，门槛相应放宽。
• AAA 普通文本 ≥ 7.0:1：增强级，适合长阅读、老年用户或无障碍要求高的场景。
• AAA 大文本 ≥ 4.5:1：增强级下的大文本门槛。
• 图形 / UI 组件 ≥ 3.0:1：图标、按钮边框、表单控件、图表关键元素等非文本内容，需与相邻色保持 3:1。

工具会用绿 / 红徽标逐项标明这五档是否通过，并给出整体评级：AAA 级（≥7）、AA 级（≥4.5）、仅大文本合规（≥3）或未达标（<3），一眼看清配色处于什么水平。

这套检查适合谁、用在哪

• 前端开发：写样式时随手校验按钮文字、链接、表单占位符是否过 AA，避免上线后被无障碍审计打回。
• UI / 视觉设计：定稿前核对品牌主色与文字色的搭配，提前发现「好看但读不清」的隐患。
• 品牌与运营：把品牌色逐一与白底 / 深底组合，筛出合规的安全用法，沉淀进设计规范。
• 内容创作者：封面图、海报、信息图上的标题配色，先过一遍对比度再发布，兼顾美观与可读。

如果测出来不达标，可以用工具的「智能修正」：它会沿着当前色相自动微调明度，把前景或背景拉到刚好过 AA 线的色值，尽量保留原有色调，而不是粗暴地换成纯黑纯白。