色彩对比度与可读性

01 色彩三要素告诉你"颜色是什么"：一个颜色由色相、饱和、明度三个维度描述。但设计里更常问的是两个颜色放在一起好不好读——白底黑字清楚，白底灰字模糊。这个"好不好读"能不能量化？能。它就是对比度（Contrast Ratio）：一个从 1:1 到 21:1 的数字，数字越大，字越清楚。当你亲眼看到数字从 1 爬到 4.5 的一瞬间，字"啪"地看清了——这就是本知识点最值钱的一刻。

对比度：字清不清楚的"音量旋钮"

把它想成一枚"音量旋钮"：黑字白底差异拉满，像最大音量一眼看见；白纸浅灰字差异很小，像音量开到 1，要凑近才勉强看清；白字白底完全看不见，像静音。对比度就是这枚旋钮，数字越大字越清楚。

对比度 = 文字和背景的差异有多大，用一个比值表示，范围是 1:1 到 21:1：

比值	代表	感觉
1:1	相同颜色（如白字白底）	完全看不见
21:1	纯黑字 + 纯白底	极限清晰
中间值	各种灰字	越接近 21 越清晰

不用记公式，先记住一条直觉：差异越大，数字越大。深 vs 浅 = 高分；浅 vs 浅 = 低分。一深一浅，对比才强。

对比度范围 1:1（同色，看不见）到 21:1（黑字白底，极限清晰）。

WCAG 及格线：正文 4.5、大字 3

微信聊天里，时间、提示语常用浅灰小字（约 12px）放白底上，对比度只有约 2:1——明显低于正文 4.5:1 及格线。但这恰恰是故意的：辅助信息故意"退后"，让强调的正文黑字更突出。它算不算违规？不算——它属于"辅助 / 装饰性"文字，本就不在正文档，所以不达标是被允许、且有意的。

光知道"数字越大越好"还不够，得知道及格线在哪。无障碍标准 WCAG 给了全球采用的底线：

文字类型	最低对比度	例子
正文（小字）	≥ 4.5:1	普通说明文字、正文
大字（≥18px / 粗体 ≥14px）	≥ 3:1	大标题、按钮大文字

为什么有两条线？因为字越大，越不依赖对比来"看清"——大字的轮廓本身就好认，要求可以放宽。这条"大字豁免"后面还会用到。需要强调的边界：装饰性 / 已废弃的文字（水印、纯装饰标题）可豁免，但正文必须达标——正文这一档，没得商量。

正文 ≥4.5:1；大字（≥18px 或粗体 ≥14px）≥3:1。

对比度怎么算：两步公式

直觉检验：纯黑（L≈0）配纯白（L≈1）→ 对比度 = (1.05)/(0.05) ≈ 21:1，正好是理论最大值。公式和直觉对上了。

可以永远靠直觉判断，但知道公式能帮你精确验证。WCAG 完整公式分两步。

第一步：把颜色变成"亮度"（相对亮度 L），范围 0~1，越亮越接近 1：

L = 0.2126 × R + 0.7152 × G + 0.0722 × B    /* 红绿蓝各自加权；绿色权重最大，因为人眼对绿最敏感 */

第二步：用两个亮度算对比度：

对比度 = (较亮的L + 0.05) / (较暗的L + 0.05)    /* 大约 = 亮的一方 ÷ 暗的一方 */

那个 0.05 是兜底，防止除数为 0（纯黑亮度为 0）。

亮度公式 L = 0.2126×R + 0.7152×G + 0.0722×B；对比度 =(较亮L+0.05)/(较暗L+0.05)，0.05 为兜底防除零。

微信实测：灰字 2:1、绿底白字 2.4:1

对比度实测：

组合	亮度	对比度	结论
微信灰 #B2B2B2 字 + 白底	0.47 vs 1.0	≈2:1	正文不达标，但属辅助性文字，故意退后
白字 + 微信绿底 #07C160	1.0 vs 0.39	≈2.4:1	大字、正文都不达标

用真实微信两组配色，走一遍"算一算 → 对照及格线 → 决定用途"的完整流程。

案例 A：微信灰辅助文字。聊天里那个 12px 浅灰时间（约 #B2B2B2）放白底上：亮度约 0.47 vs 1.0，对比度约 2:1——低于正文 4.5:1。它属于辅助性文字，故意"退后"，所以不达标被允许。

案例 B：微信绿 #07C160 上写白字。白字亮度约 1.0，微信绿约 0.39，对比度约 2.4:1。

用法	WCAG 线	达标？
大字 / 按钮	≥3:1	不达标（连 3:1 都不到）
正文小字	≥4.5:1	更不达标

所以微信绿配白字，连做成按钮都需要更深背景或给按钮文字加深色才能达标，放长段小正文更不行。这解释了为什么"绿底白字"看着容易发虚——对比不够。

微信灰 #B2B2B2 白底 ≈2:1；微信绿 #07C160 配白字 ≈2.4:1。

提高对比度：一深一浅，加粗救不了

对比度不足是可用性问题，不是审美问题：它挡住的是色盲、弱视用户和阳光下的普通人。所以"正文必守 4.5:1"是硬底线，不是"好看"的加分项。

回到 01 的三个旋钮，提高对比度就是拉开文字和背景的颜色距离，三条路：

1. 加深文字颜色——把文字明度调暗（浅灰 → 深灰 → 黑）。
2. 调高明度差——让文字和背景一深一浅（深字 + 浅底，或浅字 + 深底）。
3. 调整背景——把背景调得更浅 / 更纯，给文字让出对比空间。

最简单直觉：一深一浅，对比才强。老话"深色字配浅色底，浅色字配深色底"，本质就是拉开明度差。

需要先破一个误区：字看不清，别急着加粗。问题通常不在"字的粗细"，而在字和背景靠得太近——浅灰字站白底上，两者颜色几乎一样，哪怕加粗十倍，它还是"一坨更粗的灰"。加粗根本救不了它，先查对比度，再考虑加粗 / 换色。

提高对比度三步：加深文字 · 拉开明度差 · 调整背景；核心是"一深一浅"。

深度

编程呈现：3 行伪代码算对比度

很多设计工具（和在线工具）内部就是干这件事：

function contrast(R1,G1,B1, R2,G2,B2):          /* 输入文字RGB和背景RGB */
    L1 = 0.2126*R1 + 0.7152*G1 + 0.0722*B1      /* 文字亮度 */
    L2 = 0.2126*R2 + 0.7152*G2 + 0.0722*B2      /* 背景亮度 */
    return (max(L1,L2)+0.05) / (min(L1,L2)+0.05)  /* 亮÷暗，得出对比度 */

你不需要手写它——在线工具 / Penpot 拾色器都能一键算。学公式是为了读懂那些数字，不是为了手工算。

豁免的边界

可以豁免的：

• 大字（≥18px 或粗体 ≥14px）：轮廓够大，≥3:1 即可。
• 装饰性文字：水印、纯装饰背景大标题、已废弃提示——不承载信息，可豁免。
• 已禁用 / 不可交互元素：如"已过期"的置灰按钮。

不能豁免的：

• 正文、说明、重要信息：必须 ≥4.5:1，无障碍的硬底线。
• 不只是"好看"：对比不足会挡住色盲、弱视和阳光下的用户，是可用性问题。

一句话边界："装饰性 / 大字"可松，"正文 / 关键信息"必守。

误区

#	误解	正解
1	字看不清就加粗	加粗不改颜色差异，不解决对比不足；先查对比度，再考虑加粗 / 换色
2	对比度越高越好，所有字都拉满	装饰性文字可豁免；但正文必须 ≥4.5:1
3	灰字看不清是字太小	不只是大小，是字和背景靠得太近——对比度不够
4	只要颜色不同就有对比	颜色不同 ≠ 对比够；要一深一浅拉开明度差才算
5	对比度是审美问题，好看就行	是可用性问题：对比不足会挡住色盲、弱视和阳光下的用户

练习

即时题

• Q1：对比度 1:1 和 21:1 分别代表什么？
  答案

  1:1 = 文字背景同色，看不见；21:1 = 极限清晰（如黑字白底）。
• Q2：WCAG 给正文小字和大标题的最低对比度各是多少？
  答案

  正文 ≥4.5:1；大字（≥18px 或粗体 ≥14px）≥3:1。
• Q3：浅灰字在深色背景上，对比度会高还是低？
  答案

  高——浅灰 vs 深色背景差异大，是"一深一浅"，对比强。
• Q4（误区题）：把看不清的灰字加粗，能解决对比度问题吗？
  答案

  不能。加粗改变的是笔画粗细，不改变字与背景的颜色差异；对比不够要从颜色 / 明度下手。

模块题题目：微信绿 #07C160 上要放一行文字。你打算用"白字小正文"还是"白字大按钮"？请用 WCAG 判断哪个合理，并说明如果想用白字，该怎么做才能达标。

参考思路

白字在微信绿上对比度约 **2.4:1**：白字大按钮也达不到 3:1，放小正文更不达标（需 4.5:1）。若想用白字：**加深背景**（把微信绿明度压暗）拉高对比度，让比值先过 3:1、再奔 4.5:1；或换深色文字（深绿 / 黑）配浅绿底。关键点：**先算对比度 → 对照及格线 → 再定字号或改色**，不凭感觉。

迷你案例（微信实战）目标：用对比度计算器 / Penpot 掐一把"微信灰字"的对比，训练量化直觉。

1. 打开 Penpot，画一个白底矩形 + 一个文字图层。
2. 给文字填微信灰 #B2B2B2，看它在白底上的对比度——记录它不达标（约 2:1）。
3. 把文字改成深灰 #555555，观察对比度跳到达标（约 6:1），字瞬间"嵌入"背景、变清楚。
4. 再画一个微信绿底矩形，填白字，看对比度约 2.4:1——体会"连大字都够呛，得靠加深背景"。
5. 把背景加深一档（微信绿压暗），再看白字对比度是否爬上 3:1、再奔 4.5:1——体会"加深背景拉对比"这条路。

做完你就懂了：对比不足不是加粗，是配色；而配色的对错，用数字一量便知。

素材

• 👉 打开交互演示：对比度计算器 — 拖文字色 + 背景色，实时看对比度数字涨到 4.5:1 时字突然"看清"的临界点；自动标注是否通过 4.5:1 / 3:1 及格线，下方一段示例文字实时用该配色渲染。
• 对比度计算器：在线 WCAG 对比度工具（如 WebAIM Contrast Checker），输入两个颜色即得比值 + 是否达标。
• WCAG 对比度标准：无障碍标准对正文 4.5:1、大字 3:1 的官方定义。
• 微信绿 #07C160、辅助灰 #B2B2B2：真实色值，可在拾色器 / 计算器里验证本文数据。
• 后续衔接：01 色彩三要素（理解颜色）→ 03 对比度（保证可读）→ 04 字体基础（字号影响大字 / 正文分档）→ 12 样式系统（把配色存为可复用色样式）。

---