颜色对比度检测器

使用方法

1. 左侧填 前景色 HEX（文字或符号的颜色），右侧填 背景色 HEX。
2. 可使用原生取色器、直接输入或从设计工具粘贴。三位简写（#abc）会自动扩展为六位。
3. 对比度数值实时更新——例如 12.6 : 1，并显示 AA / AAA 通过徽章。
4. 三张状态卡分别按 正文、大号文字、UI 组件 给出 AA、AAA 结果。
5. 当正文 AA（4.5 : 1）不通过时，自动出现修正建议卡，应用修正 一键完成色相不变的亮度调整。

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 的亮度处停下——结果是离原色最近、且能通过正文 AA 的颜色。若该色相在 sRGB 色域内无法达成目标，工具回退到通过的纯黑或纯白。

隐私

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

相关工具

• 配色方案生成器 —— 从任意基色生成互补、类比、三角、四方配色。
• 颜色转换器 —— HEX、RGB、HSL 互转。
• 色阶生成器 —— 生成 Tailwind 风格的 10 档色阶。