颜色对比度检测器

WCAG 对比度公式

WCAG 2.x 对比度基于两种颜色的相对亮度计算。每个 sRGB 通道经分段 gamma 解码后，按 0.2126·R + 0.7152·G + 0.0722·B 加权得到亮度，对比度公式为 (L1 + 0.05) / (L2 + 0.05)，其中 L1 为较亮一方。结果取值范围 1（无对比）到 21（纯黑配纯白）。

三档场景：正文 / 大号 / UI

WCAG 2 按使用场景分档：

• 正文（成功标准 1.4.3）——AA ≥ 4.5 : 1，AAA ≥ 7 : 1。涵盖小于 18 px 常规字号或小于 14 px 粗体的文字。
• 大号文字——AA ≥ 3 : 1，AAA ≥ 4.5 : 1。涵盖 18.66 px 粗体及以上或 24 px 常规及以上的文字。
• UI 组件与图形（成功标准 1.4.11）——≥ 3 : 1。涵盖边框、聚焦环、图标、图表线条等非文字视觉元素。WCAG 2 在此处未规定 AAA 阈值。

为什么是「保留色相、调整亮度」

品牌色与设计 token 通常按色相身份选定，而非按亮度。当对比不达标时，直接换成纯黑或纯白会破坏视觉语言。本工具沿前景的 OKLCH 亮度轴（感知均匀）行进，保留原始色相与饱和度，在第一个达到 4.5 : 1 的亮度处停下。每个候选色先取整为 8 位 HEX 再判定对比度，复制出去的 HEX 本身就达标。结果是离原色最近、且能通过正文 AA 的颜色。若该色相在 sRGB 色域内无法达成目标，工具回退到通过的纯黑或纯白。

隐私

HEX 解析、OKLCH 转换、对比度计算、修正搜索全部在浏览器本地执行，颜色与偏好不会上传。

相关工具

• 配色生成器 —— 从任意基色生成互补、类比、三角、四方配色。
• 颜色转换器 —— HEX、RGB、HSL 互转。
• 色阶生成器 —— 生成 Tailwind 风格的 50–950 色阶，并标出每级对比度。