取色器与对比度检测完整指南

颜色对比度（Color Contrast）指的是前景（通常是文本）与背景之间的颜色亮度差异。对比度通常用一个比值来表示，例如 4.5:1——这个数字的含义是"较亮颜色的相对亮度除以较暗颜色的相对亮度"。对比度越高，文本在视觉上越清晰，阅读体验越好。

为什么对比度如此重要？Web 可访问性的核心原则之一，即"所有人（包括残障人士）都能感知、理解、导航并与网站进行交互"。根据世界卫生组织的估计，全球约有 2.53 亿人存在不同程度的视力障碍——包括近视、远视、色盲、青光眼、白内障等。良好的对比度是让这些用户也能顺畅阅读内容的基础。

WCAG（Web Content Accessibility Guidelines）是由 W3C 发布的网页内容可访问性指南，是目前全球最权威、最广泛采用的可访问性标准。最新稳定版本为 WCAG 2.1（2018 年 6 月发布）。许多国家和地区（包括欧盟、美国、加拿大、日本等）都在法律法规中要求或推荐使用 WCAG 标准。

一个容易被忽视的事实：低对比度的文本不仅对视力障碍用户不友好，对普通用户同样不友好。尤其是在强光环境（阳光直射屏幕）、低亮度设备（旧显示器、手机屏幕节能模式）、或长时间阅读场景下，对比度不足会显著影响阅读效率和用户体验。

一个有趣的观察：对比度不是"越亮越好"或"颜色差异越大越好"——而是基于人类视觉系统感知的亮度差异。例如纯红（#ff0000）在纯白背景（#ffffff）上的对比度约为 4:1 左右，但同样的纯红在纯黑背景（#000000）上可以达到约 5.25:1。同样是"红"，但在不同背景下的可读性完全不同。

在线取色器与对比度检测工具正是基于 WCAG 2.1 的标准计算公式来帮你自动检测颜色组合的对比度，并给出 AA/AAA 级的达标情况判断。

WCAG 2.1 标准定义了两个文本分类：普通文本（Normal Text）与大字体（Large Scale Text），以及两个合规级别：AA 级（Level AA）与 AAA 级（Level AAA）。让我们逐一解析它们的含义和要求：

• 普通文本：字号小于 18pt（约 24px）或字号小于 14pt（约 18.66px）且为粗体。对比度要求：AA 级 ≥ 4.5:1；AAA 级 ≥ 7:1。
• 大字体：字号大于等于 18pt（约 24px）或字号大于等于 14pt（约 18.66px）且为粗体。对比度要求：AA 级 ≥ 3:1；AAA 级 ≥ 4.5:1。

为什么"大字体"的要求更低？因为当字号变大后，字符的笔画更粗，每个字符占据更大的视觉空间，人眼更容易识别字符形状，因此对对比度依赖较低。这与"放大后字符更易于阅读"是同样的原理。

在实际项目中，我们一般遵循以下规则：

• 按钮和普通正文文本：需要满足 4.5:1（AA）或 7:1（AAA）。
• 标题、大标题、大按钮：需要满足 3:1（AA）或 4.5:1（AAA）。
• 非文本类元素（如图标、按钮装饰元素）：要求稍微宽松，但一般也建议至少 3:1。
• Logo 和装饰性文本：一般不在 WCAG 对比度要求范围内（但建议仍关注可读性）。

在设计评审时，一般建议团队至少达到 AA 级。在政府、企业级项目中，许多客户和法务团队会要求达到 AAA 级。在对比度检测工具中，自动判断颜色组合是否符合 AA/AAA 级标准，便于你在设计和开发中快速验证。

对比度的核心计算公式基于 WCAG 2.1 标准中的"相对亮度"（Relative Luminance）。相对亮度是一个在 0（纯黑）到 1（纯白）范围内的值，表示颜色在标准观察者眼中的亮度感知。

相对亮度的计算公式（WCAG 标准公式）：

对于给定的 RGB 值（每个通道值为 0-255）：

第一步：将每个通道的值归一化（0~1 范围内）并根据 sRGB 伽马校正变换到线性空间。变换规则：如果通道值 ≤ 0.03928，则直接除以 12.92；否则使用 ((通道值 + 0.055) / 1.055) 的 2.4 次方。

第二步：将线性通道值按红 0.2126 + 绿 0.7152 + 蓝 0.0722 的比例加权求和，得到相对亮度 L。

当你选择前景色和背景色后，系统会自动计算两个颜色的相对亮度值，然后用"（较亮色的相对亮度值 + 0.05）除以（较暗色的相对亮度值 + 0.05）"，得到对比度比值。

让我们以一个常见的颜色组合为例：纯黑（#000000）在纯白（#ffffff）背景上。黑色的相对亮度为 L = 0；白色的相对亮度为 L = 1。对比度 = (1 + 0.05) / (0 + 0.05) = 21:1——这是最高的对比度比值之一，也是最易阅读的组合。

另一个常见例子：品牌常用的绿色（#10b981）在纯白背景上。绿色的相对亮度约为 0.457。对比度 = (1 + 0.05) / (0.457 + 0.05) = 1.05 / 0.507 ≈ 2.07:1。这意味着这个品牌绿色在白色背景上作为普通正文文本时，不满足 AA 级 4.5:1 要求。

在颜色选择器中选择颜色，人眼主观认为的"对比度感"往往与实际计算结果不一致。例如红绿色盲用户看到的红色和绿色在视觉上可能看起来对比度更高，但实际计算后发现颜色对比度相对较低。这说明主观感知与实际颜色对比度是两回事，不可凭肉眼判断——必须用计算验证。

在网页设计和前端开发中，我们建议始终不要依赖视觉判断，而是使用工具自动计算。尤其是在设计评审时，每一种颜色组合都要经过工具验证。对比度检测工具正是为这一目的设计的。

从图片中取色是设计师、开发者日常工作中非常常见的操作。如何从一张复杂的摄影作品中快速提取主色、辅助色、阴影色等，是决定最终视觉质量的关键。以下是一些实用的取色技巧：

• 主色（Primary Color）：通常从图片中出现频率最高、占据面积最大、最吸引眼球的颜色中选择。在取色工具中，你可以通过点击图片中最明显的颜色区域进行取色。
• 辅助色（Secondary Color）：用于强调、突出显示关键信息、引导用户操作。在摄影作品中，辅助色往往是与主色形成对比的颜色（例如暖色调中的冷色点缀、暗色调中的亮色点缀）。
• 中性色（Neutral Color）：在设计中作为背景色、分隔线等，不影响主视觉。在摄影作品中，中性色往往是图片的边缘、角落或大面积区域的颜色。
• 阴影色 / 高光色：用于增强层次感。阴影色往往是从图片暗部区域提取，高光色则是从图片亮部提取。

取色中的常见误区：

• 误区一：从"看起来颜色鲜艳的区域取色"。鲜艳颜色往往对比度较低（例如黄色在白色背景上的对比度非常低）。请在取色后一定要用工具验证对比度。
• 误区二：在屏幕放大图片后取色。放大图片像素会导致颜色平均化、锐化过度。如果使用色，建议直接取色后，可能是在摄影作品中取色时，放大后的颜色可能会因图片的压缩或颜色平均化而变得不准确。
• 误区三：忽略颜色在颜色过渡区域取色。颜色过渡区（渐变边缘）的颜色值不稳定，取色时可能会取到过渡色而非目标色。建议在颜色比较饱和或中心区域取色。

在对比度检测工具中，你可以点击图片任意位置取色，并自动计算对比度。同时你也可以直接使用颜色选择器或直接输入 HEX 值进行精确取色。

在实际项目中，对比度问题往往出现在看似简单的地方。以下是一些常见的对比度陷阱及提升技巧：

• 陷阱一：渐变背景上的文本。当背景是渐变的颜色逐渐变浅或变深时，文本在不同背景色上的对比度不同。解决方案：在最亮和最暗的区域分别测试对比度；或者在文本后面加一个半透明的遮罩层（例如 rgba(0,0,0,0.5) 的黑色遮罩），增加文本与背景的对比度。
• 陷阱二：图标颜色与背景对比度。图标颜色对比度要求比文本稍低（至少 3:1），但仍然需要确保图标在背景上有足够的视觉差异。解决方案：选择与背景色有足够差异的图标颜色。
• 陷阱三：hover/active/focus 状态颜色变化。在 hover/active/focus 状态时，颜色可能会变得更亮或更暗，这时候对比度可能会下降。在设计 hover/active 状态时，请务必测试在 hover/active 状态对比度。
• 陷阱四：浅色背景上的浅色文本。在浅色背景上使用浅灰色文本（例如浅灰色 #e5e7eb 在 #f9fafb 背景上），对比度通常只有 1.1:1 左右。解决：文本颜色需更深（例如 #374151）。
• 陷阱五：深色模式的颜色对比度。深色模式下，背景是深色背景，文本是浅色文本。常见问题是浅色文本在深灰背景上对比度不够。解决方法：确保文本颜色与背景色对比度足够（AA 级至少 4.5:1）。
• 陷阱六：颜色盲友好配色。红绿色盲用户可能无法识别某些颜色组合（例如红色文本在绿色背景上）。解决方案：除了颜色对比度外，也可以考虑加入形状、位置等多种区分方式。

在实际测试时，请使用取色器与对比度检测工具，从图片中取色并测试颜色对比度并检测 WCAG 标准达标情况。特别是在按钮、标题、正文等不同部位分别测试。

一个简单有效的做法：在设计系统中建立颜色对比矩阵，列出所有可能的前景色与背景色组合，建立颜色对比表，确保每个组合都经过工具验证并记录结果（在设计系统/品牌书明确标注）。

CSS Color Module Level 6 引入了一项令人兴奋的新功能 —— color-contrast() 函数。这个函数的作用是：让浏览器在一组候选颜色中自动选择与指定背景色对比度最高的颜色。

基本语法：color-contrast(color vs(color1, color2, color3, ..., target-contrast)。其中 color 是背景色，color1、color2、color3 是候选颜色，target-contrast 是目标对比度级别（可以是 aa、aa-large、aaa、aaa-large，或者一个数值，例如 4.5）。

使用场景：

• 动态背景上的文本：当背景色是动态变化时（例如从用户上传的图片中取的主色），可以自动选择合适的文本颜色。
• 设计系统中的自动配色。在主题切换时，自动选择适合新主题背景下的前景色。
• 无障碍增强。对于不熟悉对比度要求的设计人员，可以通过这个函数自动确保文本对比度达到 WCAG 标准。

浏览器支持：截至 2025 年，color-contrast() 的浏览器支持仍然有限，主要在 Firefox 和部分浏览器中实验性支持。但随着时间推移，这一特性将在主流浏览器中得到广泛支持。在实际项目中，你可以先在支持的浏览器中使用，同时在不支持的浏览器中提供后备方案（如默认选择黑/白文本）。

即使在 color-contrast() 广泛可用之前，对比度检测工具可以帮你手动完成同样的任务，给出最适合的颜色对比度建议。

取色器与对比度检测工具看起来功能看似简单，但实际上它涉及到用户上传的图片——这些图片可能包含未发布的品牌视觉规范、客户提供的产品设计截图、以及你自己正在开发的新产品的设计稿。这些信息本身就具有商业价值，如果这些内容被上传到服务器，可能会造成商业风险。

本工具的核心设计原则是"100% 在本地浏览器运行"。所有图片取色、对比度计算、WCAG 标准检测——全部在你自己的浏览器中完成。工具页面本身不向后端发送任何与输入内容相关的请求；即使你断开网络连接打开这个工具，它也一样能正常使用。

此外，本工具不会在本地存储中写入任何与你的"工作内容相关的数据——页面刷新后，输入内容不会被保留（除非你使用浏览器的自动填充，那完全是你自己浏览器的设置）。这意味着：你在公司电脑上使用本工具处理内部项目的颜色时，不用担心颜色信息被缓存在本地后被其他人看到。

即使如此，对于包含高度敏感信息的颜色处理场景（例如尚未发布的品牌色、产品主题色、机密项目的配色方案），我们仍然建议你在断开网络的受控环境中操作，或在工具使用完成后关闭浏览器标签页。安全无小事，谨慎永远是正确的选择。

关于本工具的隐私保护策略详情，可参见我们的 隐私政策页面。