颜色与对比度课是一门 17 关的交互式教程，教你看懂设计稿与 CSS 里出现的每一种颜色写法，并学会用可测量的标准判断「这两个颜色搭在一起能不能读」。每一关给你一到三个取色器和一个具体目标——把亮度调到某个值、让对比度过 4.5:1、找出色相相隔 120° 的三个颜色、把一对色盲者难以区分的颜色改成可区分——你拖滑杆或输入色值，数值读数、对比度徽章、配色轮、色盲模拟表实时更新，判定器告诉你差在哪里。

课程分四段：颜色模型（RGB、HEX、HSL、HSV、OKLCH 的分量各自控制什么，为什么 HSL 的「亮度」和眼睛感觉到的亮度不一样）；对比度与 WCAG（相对亮度公式、4.5:1 / 3:1 / 7:1 三个门槛分别管什么）；配色（互补、三角、类似三种色轮关系）；无障碍与实践（红绿色盲看到的世界、怎样选一套色盲安全的配色、从一张 logo 里统计主色）。最后一关要求你综合前面所学，交出一套三色并通过全部检查。

学完约 45 分钟。面向前端开发者、设计师和任何需要给幻灯片、图表、海报挑颜色的人；不需要美术基础。

1. 01看目标与取色器练习区顶部是本关目标；下方一到三个取色器，标注「固定」的不可改（比如指定的背景色），其余可点色块选色或直接输入 #RRGGBB / rgb() / hsl()。
2. 02调颜色选中一个取色器后，滑杆面板出现——RGB 三根、HSL 三根，或两组都有；「数值读数」面板同步显示同一颜色的 HEX、RGB、HSL、HSV、OKLCH 五种写法。
3. 03看反馈对比度关卡显示比值与 AA / AAA 徽章，并用真实文字预览；配色关卡在色轮上标出当前色的互补 / 三角 / 类似位置；色盲关卡列出四种色觉缺陷下的模拟色与色差 ΔE。
4. 04判定与通关满足目标时结果条变绿、目录里该关打勾。部分关卡是填数字或选项，答案框在交互区底部。
5. 05提示、答案、进度「提示」给思路，「看答案」显示参考色值并可一键填入；进度存在本机，刷新不丢，「分享本关」复制带 ?lesson=n 的链接。

第 8 关「WCAG AA：正文至少 4.5:1」把背景固定为白色，要你把文字色调到对比度 ≥ 4.5 且不能是纯黑。下面是一次尝试记录：

背景（固定）  #FFFFFF   相对亮度 L = 1.000
尝试 1        #3B82F6   L = 0.228   对比度 = 1.05 / 0.278 = 3.68:1
  判定        ✓ AA 大字（≥ 3）   ✕ AA 正文（≥ 4.5）
尝试 2        #2563EB   L = 0.153   对比度 = 1.05 / 0.203 = 5.17:1
  判定        ✓ AA 大字   ✓ AA 正文   ✕ AAA 正文（≥ 7）   → 通关

第 15 关「色盲安全」以橙色 #E76F51 为参考，初始的第二个颜色是绿 #8AB17D：正常视觉 ΔE ≈ 0.20 一眼可分，绿色盲模拟下降到 0.056 几乎重合。把第二个颜色改成中等亮度的蓝（如 #2563EB），模拟下 ΔE 回到 0.15 以上，且两色对白底都 ≥ 3:1，即通关。

第 1–2 关：RGB 与 HEX——屏幕是怎么发光的

屏幕上每个像素由红、绿、蓝三个子像素组成，rgb(37 99 235) 就是三束光各自的强度，0 是关、255 是全亮。三者全 0 是黑，全 255 是白，相等则是灰。HEX 是同一组数的十六进制缩写：#2563EB 里 25 = 37、63 = 99、EB = 235，每两位一个通道；#FFF 这种三位写法是每位重复一次的简写。这套表示叫 sRGB，是网页与绝大多数显示器的默认色彩空间；数值和物理光强之间还有一条伽马曲线，后面算对比度时会用到。

第 3–4 关：HSL——用人能理解的三个量描述颜色

RGB 对机器方便，对人不直观：想把一个蓝色「调浅一点」，得同时改三个通道。HSL 换了一组坐标：色相 H 是色轮上的角度（0° 红、120° 绿、240° 蓝，360° 回到红），饱和度 S 是颜色有多「纯」（0% 灰，100% 最艳），亮度 L 是有多亮（0% 黑、50% 纯色、100% 白）。调浅就是拉高 L，做粉彩色就是低 S 高 L——课程第 4 关让你亲手调出一个。CSS 里写 hsl(221 83% 53%)，与 #2563EB 是同一个颜色。

第 5 关：HSV 与 HSL 的区别

HSV（也叫 HSB）的 V 是「三通道中最大值」：V = 100% 时颜色最艳或最亮，把 S 拉到 0 得到白色而不是灰。HSL 的 L = 100% 永远是白。设计软件的取色器多用 HSV（一个方块加一根色相条），CSS 只支持 HSL，两者互相转换没有损失，但分量含义不同，不要把 HSV 的数字直接填进 hsl()。

第 6 关：OKLCH——为什么 HSL 的「亮度」会骗人

HSL 的 hsl(60 100% 50%) 是纯黄，hsl(240 100% 50%) 是纯蓝，两者 L 都是 50%，但黄色看起来明显更亮。因为 HSL 只是 RGB 数值的几何重排，与人眼感知无关。OKLab / OKLCH（Ottosson，2020）在人眼实验数据上拟合，让 L 的相等意味着看起来一样亮，C（彩度）与 h（色相）的变化也更均匀。CSS Color 4 已经把 oklch() 纳入标准，主流浏览器均已支持。第 6 关要你只看 OKLCH 读数，把一个颜色调到明度 L 在 0.68–0.72、色相在橙色区间——你会发现 HSL 的 L 读数与它并不对应。做渐变、生成同一色相的明暗阶梯、跨色相保持「一样亮」，用 OKLCH 会稳定得多。

第 7 关：对比度公式

WCAG 定义的对比度不是任意两个数的差，而是相对亮度之比：

其中 $L_1 \ge L_2$，0.05 模拟环境光的反射。相对亮度 $L$ 由 sRGB 三通道先做伽马解码再加权：

绿色权重最大（0.7152），所以同样数值的绿看起来比蓝亮得多；黑白对比度是 21:1 的上限。第 7 关让你对着读数手算一次，之后每一关都由页面代算。

第 8–10 关：4.5、3、7 三个门槛

WCAG 2.2 的 1.4.3（AA 级）要求正文对比度 ≥ 4.5:1，大字（约 24px 常规或 18.5px 粗体）≥ 3:1；1.4.11 要求图标、边框、图表等「非文字内容」也 ≥ 3:1；1.4.6（AAA 级）把正文提到 ≥ 7:1。这些不是审美标准，而是让中度低视力用户仍能阅读的经验阈值，也是许多国家的法规依据。

第 9 关特意要求「过 7:1 但不用纯黑」：#000 配 #FFF 是 21:1 没有问题，但大面积纯黑白容易产生眩光，设计上通常选 #1A1A1A、#24292F 这类深灰，它们仍能轻松超过 7:1。反过来，浅灰占位文字 #9CA3AF 在白底上只有 2.5:1，很多网站在这里不合规。

第 11–13 关：色轮上的三种关系

配色理论最基础的部分是色相之间的角度关系：

• 互补（相差 180°）：对比最强，适合强调与按钮，大面积并列会「打架」，通常一主一辅。
• 三角（相隔 120°）：三个颜色均衡活泼，常见于品牌与插画，用时降低其中两个的饱和度。
• 类似（相邻 20–40°）：和谐、安静，适合背景与层级，缺点是缺少对比，需要用明度拉开。

课程的配色轮标出当前色的这三组位置；判定只看色相角度差（允许小幅误差），饱和度与亮度可以自由调整——真实配色里它们往往比色相更重要。

第 14–15 关：色觉缺陷

约 8% 的男性与 0.5% 的女性有某种色觉缺陷，最常见的是红绿色盲（protanopia 缺红、deuteranopia 缺绿），蓝黄色盲（tritanopia）少见，全色盲极少。课程用 Machado 等人 2009 年的生理模型模拟：把颜色投影到缺陷者的锥细胞响应上，再换回 sRGB。同时用 OKLab 空间的欧氏距离 ΔE 量化两个颜色「差多少」：≈ 0.02 以内几乎不可分，≥ 0.15 一眼可分。

第 14 关让你在三对颜色里找出绿色盲者最难分的一对——橙 #E76F51 与绿 #8AB17D 模拟后 ΔE 只剩 0.056，而红与青、深蓝与黄因为明度差大仍然清晰；第 15 关要你修好它。可行的手段有两种：拉开明度（色盲主要丢失色相信息，明度差始终可见）或换色相（红/绿改成蓝/橙）。图表尽量再加形状、纹理或直接标注数字，不要只靠颜色传递信息——这是 WCAG 1.4.1 的要求。

第 16 关：品牌色提取

从图片里「提取主色」的朴素做法是统计像素：把每个像素的 RGB 各通道量化到 16 级（4096 个桶），计数、排序、取前几个桶的平均色。课程在 canvas 上画一个示例 logo，统计后给出按占比排序的调色板，你点击色块或直接在图上取色。真实工具（如 Vibrant.js、Material You 的动态取色）会再做聚类、剔除近白近黑、按饱和度加权，但原理相同。

第 17 关：一套能用的三色

最后一关综合全部：交出三个颜色，每个对白底的对比度都 ≥ 4.5:1（可以直接做正文或按钮文字），任意两个之间的色相差 ≥ 60°（可分），并建议把三者的 OKLCH 明度调到相近（统一）。真实项目里的配色决策，大致就是「可读、可分、统一」这三条约束的交集。

色彩空间

只讲 sRGB 及其派生（HSL、HSV）与 OKLCH；不讲 Display P3、Rec.2020 等广色域，不讲 CMYK 印刷与专色。

对比度算法

使用 WCAG 2.x 的相对亮度公式；WCAG 3 草案中的 APCA 感知对比度不在课程范围（它更精确，但尚未成为标准）。

色盲模拟

Machado 2009 模型的全缺陷（severity = 1）矩阵，未提供程度可调的弱色觉模拟。

配色判定

只校验色相角度关系（允许小幅误差），不评价审美。

品牌色提取

只对课程内置的示例图运行，不接受上传；要处理自己的图片请用「颜色工具」。

不做什么

不生成调色板方案、不导出设计令牌、不检查整站合规。

• 「HSL 的 L 相同就一样亮」：不是。HSL 与感知无关，黄色 L=50% 远比蓝色 L=50% 亮；要让颜色看起来一样亮，比对 OKLCH 的 L 或直接看对比度。
• 「颜色差得越远对比度越高」：对比度只看亮度。纯红 #F00 与纯绿 #0F0 色相相差 120°，对比度却只有 2.9:1，并且红绿色盲几乎无法区分。
• 「4.5:1 是设计师的偏好」：它是 WCAG 2.2 AA 级的可测量门槛，是多国无障碍法规的依据。
• 「透明度不影响对比度」：半透明文字叠在背景上得到的合成色才是真正参与计算的颜色；工具算的是不透明色，要先把叠加结果算出来。
• 「色盲就是分不清红绿」：还有蓝黄色盲与全色盲；而且红绿色盲者也能分辨明度差，所以拉开明度永远有效。

课程全部在浏览器本地运行：颜色换算、对比度、色盲模拟与像素统计都是页面内的纯计算，不请求服务器；示例 logo 是页面用 canvas 现场绘制的，不加载外部图片；进度存在本机 localStorage。

• W3C，Web Content Accessibility Guidelines (WCAG) 2.2，Success Criterion 1.4.3 Contrast (Minimum)、1.4.6 Contrast (Enhanced)、1.4.11 Non-text Contrast，以及术语表中 relative luminance 与 contrast ratio 的定义：https://www.w3.org/TR/WCAG22/#contrast-minimum（访问日期：2026-09-09）
• W3C，CSS Color Module Level 4——sRGB 伽马曲线、hsl()、oklch() 的规范定义与相互转换：https://www.w3.org/TR/css-color-4/（访问日期：2026-09-09）
• Björn Ottosson，A perceptual color space for image processing（2020）——OKLab 的设计目标与转换矩阵：https://bottosson.github.io/posts/oklab/（访问日期：2026-09-09）
• G. M. Machado, M. M. Oliveira, L. A. F. Fernandes，A Physiologically-based Model for Simulation of Color Vision Deficiency，IEEE TVCG 15(6), 2009——课程色盲模拟所用矩阵的来源：https://www.inf.ufrgs.br/~oliveira/pubs_files/CVD_Simulation/CVD_Simulation.html（访问日期：2026-09-09）
• MDN Web Docs，Color contrast（无障碍指南）——门槛的实践解读与工具清单：https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Understanding_WCAG/Perceivable/Color_contrast（访问日期：2026-09-09）