你在作图软件里给所有卡片的正文都设成了同一个灰色，色值是 #666666，你确认过不止一次。但设计稿拼到一起之后，放在白色底上的卡片，文字看起来是正常的灰；放在浅蓝色底上的卡片，同样的灰看起来偏暖了，甚至有一点点发黄。你用取色器去吸，色值没错，确实是同一个 #666666。但眼睛可不这么认为。

于是你开始调色。给浅蓝背景上的灰加了一点蓝，看起来舒服多了。但这个调整过的灰放到白色背景上，又偏冷了。你再新建一个灰。两种背景各一个灰，后来又加了深色卡片的灰、浅灰卡片上的灰。设计稿里的灰色从一个变成四个，四个变成七个，每个色的色值只差一两个数字，你自己都分不清哪个该用在哪里。

这个过程里，你并没有犯任何设计错误。你的色值定义是对的，你的取色器也没坏。问题出在你和颜色之间的那个中间环节——你的视觉系统。它在你观察颜色的时候，主动改变了你的感知。这个现象有一个名字，叫同时对比。

一、你的眼睛如何工作

要理解同时对比，得先知道人的视觉系统是怎么处理颜色的。

人眼不是一台精密的测色仪。测色仪看到 #666666 就输出 #666666，不管旁边放了什么颜色，结果都一样。但人眼不是这样工作的。人眼在接收颜色信息的同时，会自动拿当前颜色和它周围的颜色做比较，然后根据比较结果调整你的感知。这个调整不经过你的意识，你没办法控制它，也没办法关掉它。

这种机制在日常生活中其实非常有用。想象一下，你从一个明亮的室外走进一个昏暗的咖啡馆，如果你的眼睛不做调整，咖啡馆里所有东西都应该看起来是一片漆黑。但你走进去几秒钟后就能看清桌椅的颜色、墙面的质感、菜单上的文字。这是因为你的视觉系统根据环境光线重新校准了所有颜色的感知基准。你看到的不是颜色的绝对值，而是颜色之间的相对关系。

同时对比就是这个机制在微观层面的表现。当两个颜色紧挨着出现时，你的视觉系统会自动放大它们之间的差异。如果一个灰色旁边是深色，视觉系统会让灰色看起来比实际更亮；如果同一个灰色旁边是浅色，视觉系统会让它看起来比实际更暗。你看到的不是颜色"本来的样子"，而是颜色"相对于周围环境的样子"。

这个过程发生在视网膜和大脑视觉皮层的信号处理阶段。视网膜上的感光细胞在接收光信号时，会受到周围细胞的抑制作用——旁边的细胞越活跃（接收的光越强），当前细胞的信号就会被压低。这种机制叫侧抑制。侧抑制让你感知到的颜色永远是一个"经过邻居影响"的版本，而不是颜色的物理真实值。

所以当你觉得"这两个灰色看起来不一样"的时候，你的判断在感知层面是对的——它们在你的视觉体验里确实不一样。但在物理层面，它们的色值没有任何变化。这个矛盾就是同时对比的核心。

二、同时对比的三种表现

同时对比不是只有一种效果。它会在明度、色相、饱和度三个维度上分别发生，每种表现在界面设计中造成的困扰各不相同。

1. 明度对比

明度对比是最常见、最容易感知到的一种。

拿一个中等灰色举例，比如 HSB 色彩模式下明度值 50% 的灰。把这个灰色放在一个深色背景上（明度 15%），你会觉得它相当亮，甚至有一点"发光"的感觉。把同一个灰色放在白色背景上（明度 100%），你会觉得它暗了不少，沉稳了很多。色值完全一样，但你的感知差异非常明显。

视觉系统在做的事情是：在深色环境里，它把你的感知基准拉低了，所以中灰色相对于基准显得亮；在浅色环境里，基准被拉高了，同样的中灰色相对于基准就显得暗。

这种效应在界面设计中出现的典型场景是跨背景复用颜色。比如你有一个页面，顶部是深色的 hero 区域，下面是白色的内容区域。两个区域都用了同一个灰色作为辅助文字色。在深色 hero 区域，这个灰色看起来清晰可读；到了白色内容区域，同样的灰色看起来变淡了，和背景的对比度感知上降低了。如果你为了让白色区域的灰色"看起来和上面一样深"而去调暗它，这个调暗后的灰色放到深色 hero 区域又会显得太重。

另一个常见场景是卡片设计。当卡片背景是白色，放在浅灰色页面背景上时，卡片内部的元素颜色看起来是一种感觉；同样的卡片放在深色模块里，内部颜色的感知立刻发生变化。你以为是卡片的配色出了问题，其实是卡片周围的环境变了。

2. 色相对比

色相对比比明度对比更隐蔽，也更容易让人困惑。

当一个颜色和另一个有明确色相的颜色紧挨在一起时，视觉系统会把这个颜色往相邻色相的反方向推。听起来有点抽象，用具体例子说：一块纯灰色（没有任何色相倾向，饱和度为零），放在蓝色背景上，你会觉得这个灰色微微偏暖，带一点黄橙的味道。把同一块灰色放在橙色背景上，你会觉得它微微偏冷，带一点蓝的倾向。灰色本身的色值没有变，但你的视觉系统在"减去"周围的颜色，结果就是让你感知到一个偏向互补色方向的色相偏移。

这种效应在界面设计中容易出问题的地方是导航栏和内容区的颜色衔接。假设你的产品用了一个蓝色的顶部导航栏，导航栏里的图标用了浅灰色。用户往下滚动后，同样的浅灰色图标出现在白色背景的工具栏里。因为导航栏的蓝色背景让灰色图标看起来偏暖，而白色背景上的灰色图标没有这个偏移，两组图标放在一起就会让人觉得颜色不统一。

色相对比还会影响中性色系统的感知。你精心定义了一组"无色相倾向"的灰色用于文字和分割线，但如果这些灰色频繁出现在某个彩色区域附近，它们在感知上就不再中性了。设计师有时候会说"我的灰色发蓝"或者"我的灰色发黄"，很多时候不是灰色本身有色相偏移，而是周围的颜色通过同时对比"染"上去的。

3. 饱和度对比

饱和度对比的规律和前两种类似：视觉系统会放大相邻颜色在饱和度上的差异。

一个中等饱和度的颜色，放在高饱和背景上会显得灰、显得暗淡；放在低饱和或无彩色背景上会显得鲜艳、显得跳。这就是为什么你在作图软件里调好的品牌色按钮，放到纯白页面上觉得很醒目，但放到一个同色系的浅色背景板块里就觉得"融进去了"，不够突出。按钮的颜色没变，但浅色背景板块本身带有一定的饱和度，拉低了你对按钮颜色饱和度的感知。