# 配色要几个颜色：底色、正文、强调三个角色，以及怎么确认字还读得清

从分角色到同色相定深浅，再到用对比度读数验一次：三色配色怎么定，4.5:1 和 3:1 到底管什么

> 配色 · 色彩对比度 · 视觉层级 · 约 5 分钟 · 10 月 25 日

## 本篇要点

1. 配色不是挑几个好看的颜色，而是分三个角色：底色铺面积、正文色承担所有要读的字、强调色只指向一处；三个颜色就够用。
2. 用量比例可以借 60-30-10 作参考，但唯一必须记住的是强调色要少——占到三成它就是第二个底色。
3. 拾色器里 H 是色相（0–360 的圆环）、S 是饱和度、B 或 L 是明度；只有明度决定两个颜色能不能分开、字能不能读，色相决定它们算不算一家。
4. 所以底色与正文色取同一个色相、只拉大明度差，就同时拿到可读性和“一套颜色”的统一感。
5. 用对比度比值 $(L_1+0.05)/(L_2+0.05)$ 确认：正文 ≥4.5:1，大字和图形 ≥3:1，且不四舍五入。
6. 灰色和彩色强调色是最容易掉线的两类：`#999999` 压白底只有 2.85:1，砖橙 `#C8511B` 压浅底只有 4:1，够大标题不够小字。
7. 上版后做眯眼和转灰阶两项自检：前者验明度骨架，后者验层级是否只靠色相支撑。
8. 强调色若承载文字，字色与它的组合同样要过 4.5:1；需要辅助信息的颜色时不要新增色相，用正文色的浅一版但仍需过线。

---

接到一张海报，最省事的做法是打开配色网站，看中一排色块，拷下四五个色值。问题不在于网站推荐得好不好，而在于你拿到的是几个颜色，不是一套分工——哪个铺底、哪个写字、哪个只出现一次，没人告诉你。

这篇把这件事拆成可操作的步骤：先分角色，再用同一个色相定出深浅，最后用读数确认字压上去还读得清。做完你手上就是一套三个颜色的配色。

开始前准备三样东西：一张正在做的物料（没有就开个空白画布，随便放几行字）；软件自带的拾色器，要能看到 H、S、B（或 L）三个滑块的那一版；一个在线对比度检查器，搜 contrast checker 就有，只用来读数字。

## 第一步：先分角色，别先挑颜色

一张物料上，颜色按活儿分工，只有三个位置：

**底色**——占面积最大，所有字都压在它上面。**正文色**——承担全部要读的字，包括标题。**强调色**——只指向一个东西，价格、按钮，或者标题里的一个词。

先对着你手上的图回答三个问题：面积最大的那块颜色是哪个？绝大部分字是什么颜色？唯一一处跳出来的是什么颜色？第三个问题答不出来很常见——说明这张图上只有两个颜色在干活，层级全靠字号撑，这就是“说不出哪里平”的典型来源。

用量可以借一个经验说法：60-30-10，底色约占六成，次级色三成，强调色一成[2]。它是经验，不是定律；对新手真正有用的是后半句——**强调色必须少**。占到三成，它就是第二个底色，不再是强调。

## 第二步：底色和正文色用同一个色相，只改明度

拾色器三个滑块各管一件事：

- **H（色相）**：0 到 360 度的圆环，0 度是红、120 度是绿、240 度是蓝，决定“这是什么颜色”。
- **S（饱和度）**：0 是纯灰，100 是最艳。
- **B 或 L（明度）**：决定多深多浅。HSL 里 50% 是最纯的颜色，100% 是白，0% 是黑[3]。

三个里只有明度管可读性。两个颜色能不能被眼睛分开、字压上去能不能看清，几乎只取决于明度差；色相差管的是另一件事——这东西看起来算不算“一家”。所以定色的顺序是：**先定明度差保证能读，再定色相决定气质。**

![色相沿圆周变化、饱和度由圆心向外扩散、明度由下向上——拾色器的三个滑块就是这三个方向](https://data.europa.eu/apps/data-visualisation-guide/Colour%20the%20basics%20a90e331756d2497aa8b2b3ce26b9e3de/1280px-HSL_color_solid_cylinder_saturation_gray.png)

具体两步：

1. 底色选浅的：明度拉高、饱和度压低。比如 H=40、S=20%、L=95%，得到一个暖白。
2. 正文色取**同一个 H**，明度压到 15–20%，饱和度也压回 20% 左右，得到同族的暖黑。

这样两色天然同源。前面讲重复时提过，颜色是“该一套到底”的四类元素之一；所谓固定一套颜色，固定就是这一对。

用不用纯黑纯白？纯黑压纯白是 21:1，谁也读不错，但整张图会显得冷硬。赶时间就先用黑白，别在这上面耗。

## 第三步：读一次数，再谈好不好看

对比度比值是这么算的：

$$\text{对比度}=\frac{L_1+0.05}{L_2+0.05}$$

$L_1$、$L_2$ 是两个颜色中较亮和较暗那个的相对亮度，都在 0 到 1 之间，所以比值落在 1:1 到 21:1。

WCAG 2.2（AA 级）给出的门槛是：正文和小字至少 4.5:1；大字——18pt（约 24px）以上，或 14pt（约 18.5px）以上的粗体——可以降到 3:1；图标、色块这类图形对象 3:1；计算不四舍五入，4.49:1 不算过线[1]。

拿刚才那套配色和两个常见反例对一下：

| 组合 | 对比度 | 能干什么 |
| --- | --- | --- |
| 正文 `#2B2622` 压底色 `#F4F1EC` | 约 13:1 | 小字正文都够 |
| 中灰 `#999999` 压白底 | 约 2.85:1 | 小字不合格 |
| 砖橙 `#C8511B` 压 `#F4F1EC` | 约 4:1 | 大标题、色块可以，小字不合格 |

读法只有一句：**灰字不是不能浅，而是浅到某个点就掉线。** 而你的眼睛判断不了那个点——亮屏、暗屏、手机、投影，看到的都不一样。这件事交给数字，一目了然。

## 第四步：强调色只要一个，它自己也要过线

选强调色有两条要求：

1. **跟底色、正文不同族。** 同一个色相深一点浅一点不算强调，那只是深浅。
2. **差别要够大。** 落在正文色的“隔壁”，眼睛会读成没配好——和字体搭配里那个中间地带是同一种失误。

用法上限是一处。价格、报名按钮，或者标题里唯一那个词。两处以上就不再存在“你最想让人先看的地方”，这跟对比那篇讲的是同一个毛病：到处都在喊，等于没人喊。

如果强调色上还要写字，那组“字色 + 强调底色”也得过 4.5:1。白色字压在 `#C8511B` 上大约 4.5:1，是刚好压线的位置——这种“刚好”最容易在印刷或换屏时翻车，宁可把橙色再压深一档。

## 第五步：上版之后的两项自检

**眯眼。** 把图缩小，或者眯起眼看。应该只剩一处跳出来，就是强调色；如果底色和正文混成一片，说明明度差不够，回去动明度。

**转灰阶。** 把图转成黑白。层级如果还在，说明这套颜色本身站得住；一转灰就全糊，说明你是靠色相在撑层级，换个黑白打印的场合就没了。

## 收尾

顺序就三步：分角色 → 同色相定深浅 → 用读数验一次。

三个颜色足够用。如果还需要一个位置放辅助信息（日期、地址、单位），**别新增色相**，用正文色的浅一版——但同样要过 4.5:1，这是整套配色里最容易掉线的地方。

最后一句检查，比记规则管用：把图给没看过的人看两秒，问他图上最显眼的是哪个词。答对了，这三个颜色就分好工了。

## 思维导图

```mermaid
flowchart LR
  A["配色要几个颜色"] --> B["先分三个角色"]
  B --> B1["底色：铺面积最大"]
  B --> B2["正文色：承担所有字"]
  B --> B3["强调色：只指向一处"]
  B1 --> C["同色相定深浅"]
  B2 --> C
  C --> C1["H 色相：决定气质与归属"]
  C --> C2["L 明度：决定能不能读"]
  C --> D["用对比度验一次"]
  D --> D1["正文 ≥ 4.5:1"]
  D --> D2["大字与图形 ≥ 3:1"]
  B3 --> E["强调色要求"]
  E --> E1["不同族、差别够大"]
  E --> E2["用量约一成，只用一处"]
  D --> F["上版自检"]
  F --> F1["眯眼：只剩一处跳出来"]
  F --> F2["转灰阶：层级还在"]
```

## 术语表

- 底色 / 正文色 / 强调色：颜色在一张物料上的三个岗位，按“铺面积、承担所有字、只指向一处”分工，不是三个随机的色值。
- 色相、饱和度、明度（H / S / L 或 H / S / B）：拾色器三个滑块分别控制“什么颜色”“多艳”“多深多浅”，其中只有明度影响能不能读。
- 对比度比值：用两色相对亮度算出的一个数字，衡量文字压在底色上是否读得清，正文门槛 4.5:1。

## 来源

1. [W3C: Understanding Success Criterion 1.4.3 Contrast (Minimum) — 4.5:1 与 3:1 门槛、大字定义、对比度公式与不四舍五入的要求](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum)
2. [Nielsen Norman Group: Using Color to Enhance Your Design — 把 60-30-10 作为用量比例的经验说法，并建议强调色留给最需要被注意的内容](https://www.nngroup.com/articles/color-enhance-design/)
3. [Programming Design Systems: Color Models and Color Spaces — 色相、饱和度、明度（HSL/HSB）三个维度的定义](https://www.programmingdesignsystems.com/color/color-models-and-color-spaces/index.html)

---

原文：https://pangzhengboyin.com/articles/three-role-color-palette-and-contrast-6cceb1f6

> **庞征博引** · 想学的，慢慢都会
>
> 庞征博引是把想学的东西写成连载的 AI 学习工具：每篇 5–10 分钟，边读边问，接下来学什么跟着你走。这篇就是这样写出来的。
>
> 开始你自己的连载 → https://pangzhengboyin.com