# 对比：怎么把主次拉开，以及“对比不够”和“到处都在喊”怎么修

用大小、粗细、颜色、疏密四个杠杆拉开层级，以及两种常见毛病各自的修法

> 视觉层级 · 排版 · 版面设计 · 约 7 分钟 · 09 月 25 日

## 本篇要点

1. 对比在版面里管两件事：制造看的兴趣，以及建立层级，让读者不读文字就知道先看哪一条。
2. 判断两个元素够不够不同要看倍数而不是差值：13pt 对 15pt 只有 1.15 倍，属于“有点不一样又不真不一样”的冲突；同一张图里常见做法是至少 1.5 倍以上，标题对正文往往 2 倍以上。
3. 面对差距只有两个正确选项：一次拉大到一眼可见，或者做成完全一样；停在中间会被读成失误。
4. 四个杠杆是大小、粗细、颜色、疏密。字号负责最大的层级差，同一档内部靠字重和颜色分；字重两档就够，压低次要信息应改颜色或字号，而不是换成更细的字重。
5. 白底上可以用浅灰给文字降级，彩色背景上不要用灰字或半透明白字，应取背景同色相调亮一档。
6. 对比度比值衡量文字和背景的明暗差距：1:1 是完全同色，21:1 是纯黑配纯白。WCAG 要求正文级文字至少 4.5:1，18pt 以上（约 24px）或 14pt 以上粗体可放宽到 3:1；印刷物料不受此约束，但可当参考底线。
7. 平均分配的间距不传递信息，把空白集中在主要信息周围，是不占画面的强调手段。
8. “对比不够”和“到处都在喊”是同一个原因的两端：层级来自相对的差距，差距太小和处处都在最高档，都让差距归零。
9. 修“对比不够”是把差距一次拉大或干脆合并成一样；修“到处都在喊”是数出用了最强处理的处数，只留一处，其余退回普通档。
10. 视觉重量和对比度可以互相补偿：实心图标压过文字时调淡它的颜色，浅色细线太弱时加线宽而不是加深颜色。
11. 把图缩到很小看第一个跳出来的是什么，再转成灰度确认层级是否还在，这两个检查不用懂配色也能做。

---

版面看着整齐，不等于有重点。前两篇解决的分别是“这些信息该分几组”（亲密性）和“东西该靠在哪条线上”（对齐），它们管的是秩序。但一张排得整整齐齐的图，读者仍然可能不知道从哪一行开始看。决定这件事的是对比。

对比有两个作用：让人有看的兴趣，以及建立一套组织信息的层级[1]。对做海报、封面的人来说，第二个更实用——读者不读文字，只看一眼，就应该分得出哪个是标题、哪个是时间地点、哪一段可以跳过。

## 一、对比是相对的，所以只有两种状态：明显不同，或者完全一样

Robin Williams 给对比原则的表述是：“如果两个元素不是完全一样，那就让它们明显不同——真的不同。”[1] 她把这句话的反面叫冲突（conflict）：两个元素有点不一样，但又不真的不一样。

13pt 和 15pt 的两行字放在一起，就是典型的冲突。它们不是一样大，但差的这一点不足以让人看懂谁更重要。读者不会理解成“这是层级”，只会觉得“这两行好像没对齐”“是不是做错了”。所以对比不够时，版面在读者眼里不是“平”，而是像失误。

判断两个元素够不够不同，看的是倍数，不是差值。13 到 15 只有 1.15 倍；同一张图里要一眼分出主次，常见做法是至少拉到 1.5 倍以上，标题和正文之间往往要 2 倍以上。这是经验值，不是硬规定，但它能解释那个常见的困惑：“我把标题加粗、加了两个字号，怎么还是没效果。”

另一条路是反过来，把两者做成完全一样。同一层级的两行信息，用同一个字号、同一个颜色、同一个字重，读者自然知道它们是一档的。要么离得够远，要么靠到一起，不要停在中间——停在中间那种“差一点”，读者读不出意图。

## 二、大小、粗细、颜色、疏密：四个可以拉动差距的杠杆

**大小。** 最直觉，但不该是唯一手段。只用字号拉层级，结果通常是标题巨大、正文极小，中间那一档没地方放，整张图看着粗糙[2]。分工可以这样定：字号负责最大的那一级差（标题对正文），同一档内部再分主次，交给下面两个杠杆。

**粗细。** 普通界面和多数印刷字体里，两档就够：正文一档（400 或 500），需要强调的一档（600 或 700）[2]。别为了压低次要信息而换成比正文更细的字重——400 以下在正文尺寸下容易发虚发灰，反而更难读。想降级，改颜色或改字号，别动字重[2]。

**颜色。** 最省事的做法是给文字定三个明暗档：主要信息用最深的颜色，次要信息用中灰，第三级（页脚、备注、版权）用更浅的灰[2]。白底上这么做很有效，因为浅灰确实把对比度降了下来。但换到彩色背景上，同样的做法会失败：灰字压在彩色上看起来脏，白色字调低透明度则显得发灰，像被禁用了[2]。正确做法是取背景的同一个色相，把它调亮一档当文字色。

降级也有底线。这里要用到一个具体数值——对比度比值，也就是文字颜色和背景颜色的明暗差距：1:1 是完全同色，21:1 是纯黑配纯白。网页无障碍标准 WCAG 要求正文尺寸的文字和背景至少达到 4.5:1，字号够大时可以放宽到 3:1；这里的“大”指 18pt（约 24px）以上，或者 14pt 以上的粗体[3]。做印刷物料不受这条标准约束，但这个数字可以当参考底线——你可以让次要文字变浅，别浅到读不出来。

**疏密。** 空白也是杠杆。如果整张图所有间距都用同一个值，那间距就没有在传递任何信息。给主标题周围的空白留得比段落之间大得多，读者不看字号也会把它当成更高一档。这是成本最低的一种强调：它不往画面上加东西，只是把别的东西推开。

## 三、先排序，再挑杠杆

杠杆有四个，不等于四个都要用。动手前先做一件事：把图上的信息按重要性排成三级——主要、次要、支持；然后只给“主要”那一级配最强的处理。

一张图里真正站在最高一档的通常只有一个，叫焦点。可以有两三个强调元素，但它们必须自己也能排出先后，不能并列第一。

想突出主角，最便宜的办法往往是去压配角，而不是继续抬主角[2]。把背景、边框、次要文字的对比度降下来，主角一个参数都不用改，看起来就会更靠前。这个思路通常叫“通过弱化来强调”（de-emphasize to emphasize）。

## 四、“对比不够”和“到处都在喊”怎么修

两个毛病常被当成相反的两件事，其实原因相同：层级来自差距，而差距是相对的。差距太小是问题，处处都在最高档同样是问题——当所有元素都拿到最强处理，元素之间的差距反而变成零，等于没有层级。

```mermaid
flowchart LR
  A["看整张图"] --> B{"第一眼能不能说出先看哪一条？"}
  B -- "说不出，要凑近比才知道" --> C["对比不够：把差距一次拉大，或做成完全一样"]
  B -- "说得出，但一堆东西同时跳出来" --> D["到处都在喊：只留一处最强，其余退回普通档"]
```

**对比不够。** 症状是版面发灰、发平，读者找不到入口；或者你自以为把两条信息分成了两级，别人看着却像同一级。诊断办法很直接：眯起眼睛，或者退后两步，还能不能一眼说出哪个更重要？要凑近比较才知道，就是不够。修法只有两条：把差距一次拉大到一眼可见（字号跳一两档、颜色深一档、字重加一级，一次改够），或者干脆把两者做成完全一样，把层级交给别处表达。不要每个元素都加一点点。

**到处都在喊。** 症状是加粗、上色、放大、加框、加底纹同时出现在好几处，每条信息都在抢注意力；读者看得累，看完却一条也没记住。这时的动作很具体：数一数图上用了“最强处理”的地方有几处。如果不止一处，把除一处以外的全部退回普通档。强调效果差，通常不是因为你强调得不够，而是因为你在同时强调太多东西。

还有一层容易被忽略：重要性高，不等于要占用所有手段。每种手段都在消耗这条信息的“响度”，又大又粗又上色还带框，后面的元素就没法再分出层次了。

## 五、重量和对比度可以互相顶替

最后一件事能让上面的调整都变好办：视觉重量（面积、笔画粗细）和对比度（深浅）是可以互相补偿的两种资源[4]。

实心图标、大色块、粗体字本身就很“重”，跟旁边的文字摆在一起会盖过它。这时未必需要把文字也加粗，把图标的颜色调淡一点就平衡了。反过来，一条很浅的细线看着太弱，如果加深颜色会显得刺眼，那就保持浅色、把线宽从 1px 加到 2px[4]。

这条规则记一句话就够：想强调，就加重量或者加对比度；想压下去，就减掉其中一个。两种资源各调一点，比在同一种资源上较劲容易调出想要的效果。

## 两个不用配色也能做的检查

- 眯起眼，或者把图缩到很小：第一个跳出来的是什么？什么都跳不出来，是对比不够；跳出来一堆，是到处都在喊。
- 把图转成灰度看一遍。层级还在，说明你是用大小、粗细、疏密做出来的，颜色只是加分；层级没了，说明颜色是你唯一的层级手段，一旦印成黑白，重点就丢了。

接下来要处理的是“用什么字体、怎么搭配”。它和这篇的关系是：对比决定谁重要，字体决定它看起来是什么性格。

## 术语表

- 冲突（conflict）：两个元素有点不一样但不真的不一样，读者读不出意图，只会当成失误；对比是它的反面。
- 视觉层级：不看文字内容、只凭大小粗细深浅就能排出的重要性顺序。
- 去强调（de-emphasize to emphasize）：通过压低配角让主角突出，比继续强化主角更省力。
- 三级文字色：主要用深色、次要用中灰、第三级用浅灰，用同一套深浅档位区分信息重要性。
- 对比度比值：文字颜色和背景颜色的明暗差距，1:1 是完全同色，21:1 是纯黑配纯白；网页标准要求正文级文字至少 4.5:1。
- 重量与对比度互换：面积和笔画粗细属于“重量”，深浅属于“对比度”，两者可以互相补偿，调其中一个就能改变强调程度。

## 来源

1. [Robin Williams《The Non-Designer's Design Book》第 5 章 Contrast：对比必须足够强，相似而不相同的是冲突](https://www.oreilly.com/library/view/the-non-designers-design/9780321563088/ch05.html)
2. [Refactoring UI：层级章节要点，含 Size isn't everything、De-emphasize to emphasize、Don't use grey text on colored backgrounds](https://refactoringui.com/)
3. [W3C WCAG 2.2 对 1.4.3 的解释：正文 4.5:1、大字号 3:1，以及“大”的判定（18pt 或 14pt 粗体）](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html)
4. [Refactoring UI 层级章笔记：面积、重量与对比度之间的关系，可用对比度补偿重量](https://jacobshannon.com/blog/books/refactoring-ui/hierarchy-is-everything/)

---

原文：https://pangzhengboyin.com/articles/contrast-hierarchy-and-common-fixes-737b1152

> **庞征博引** · 想学的，慢慢都会
>
> 庞征博引是把想学的东西写成连载的 AI 学习工具。说出想学什么，它会先了解你的基础，再把主题写成一篇篇 5–10 分钟能读完的文章；边读边问，接下来学什么跟着你走。这篇就是这样写出来的。
>
> 开始你自己的连载 → https://pangzhengboyin.com