色天堂让配色有理可循

固定两个维度，只改一个变量，观察颜色如何变化。

理解原理：色相帮助描述颜色偏红、偏绿还是偏蓝；饱和度描述色彩的鲜艳程度；明度描述深浅。不同颜色模型中的数值定义并不完全相同，不要把软件里的亮度滑块当作人眼感知亮度的精确刻度。

操作步骤：在 HSL 选色器里先固定色相为 270°，做出三组不同饱和度的色块；随后固定色相与饱和度，改变亮度。把这些色块分别放到白色和深灰背景上，观察相同颜色在不同邻接条件下的视觉差异。

练习与检查：练习：为一张读书卡片选择一个主色、一个浅底和一个深文字色。写下每个颜色的用途；如果只会说“很好看”，再补充它如何帮助读者找到标题或操作。

把色轮当作组合地图，再用明暗关系修正阅读效果。

理解原理：色轮把色相关系组织成环形。相邻色常用于连续、统一的感受；相隔较远的色相可以形成更强区分。具体的互补关系取决于采用的色彩模型，学习时先注明自己使用的色轮。

操作步骤：在同一色轮上选取三个相邻色，再选取一组相对色，各制作一张相同内容的信息卡。两张卡片都使用中性文字，保持版式和字体一致，只比较色彩关系。

练习与检查：检查点：不要把互补色直接等量铺满页面。先选一种作为主要背景或主色，另一种用于小面积提示，再检查标题和正文是否仍是注意力中心。

背景、辅助、强调各有任务，面积比例需要随内容调整。

理解原理：先写下页面任务：让人读完说明、区分数据，还是完成一个操作？把任务对应到背景色、辅助色和强调色，避免每个元素都争夺注意力。

操作步骤：教学配方：背景 #FAF0F5，正文 #2D1B2D，强调 #713B87。先用背景和正文搭出完整信息层级，再把强调色放到唯一主要操作上。此配方用于练习，不是适用于所有状态的通用保证。

练习与检查：制作三个版本：仅改强调色的使用面积，从少量标签到大块标题底色。观察哪个版本最容易找到主要操作；记录选择理由，不必追求某个固定面积比例。

同一色相也能有丰富层次，关键在深浅和用途分工。

理解原理：单色配色围绕一个色相展开，靠明暗和饱和度变化建立层次。它适合需要统一感的阅读页，但不同色阶过于接近时容易失去组件边界。

操作步骤：先准备背景、轻提示、边界、主色和深文字五种角色。色值不要机械等分：用于正文的色阶需要与背景形成足够差异，用于大面积背景的色阶则应避免抢夺注意力。

练习与检查：练习：完成一张包含标题、摘要、标签和链接的卡片。去掉标签的填色后，仍应能通过文字或位置辨认其含义。若不行，调整结构，而不只是增加饱和度。

把品牌色、状态色和中性色分开管理。

理解原理：品牌主色可以帮助识别产品，但成功、警告和错误需要清楚的语义。给色值起用途名称，例如正文、表面、错误文字，而不是让开发者从“紫色3号”猜测用途。

操作步骤：为默认、悬停、按下、禁用和键盘焦点分别定义视觉状态。焦点表示当前位置，不等于按下；错误提示应同时写出原因与修正办法，不要只把边框变红。

练习与检查：练习：制作保存成功、资料缺失、删除确认三种提示卡。遮住颜色后阅读文字，确认结果和下一步仍然清晰，再检查颜色是否一致地支持这些信息。

在深色表面重新安排文字、浮层和强调色。

理解原理：浅色界面直接反相会改变主次关系。深色模式中，过亮的边界可能比内容更突出；高饱和强调色大面积出现时也容易分散注意力。

操作步骤：先选择基础深色表面与稍有差异的浮层表面，再确定主文字和次文字。把主操作、错误提示、图表标记放到两类表面上逐项查看，避免只检查首页背景。

练习与检查：练习：将单色卡片改为深色版本，保留原信息顺序。分别记录正文、标签、链接和焦点使用的颜色对；如果某个角色不清楚，单独调整该角色，不必整体提亮。

对比度要测真实前景和背景，不靠肉眼猜。

理解原理：WCAG 2.2 的文字最低对比度要求中，普通文字通常需要至少 4.5:1，大号文字通常至少 3:1；大号通常指至少 18pt，或至少 14pt 的粗体。标志、纯装饰和非活动组件等有特定例外，应按规范语境判断。

操作步骤：对比度按两种颜色的相对亮度计算，形式为 (较亮值 + 0.05) / (较暗值 + 0.05)。先把 sRGB 通道转为线性值，再加权求亮度；不能直接把十六进制颜色求平均。

练习与检查：实际检查应覆盖文字所在的背景，包括渐变或叠图中最不利的区域。计算值未达到门槛时，不可通过显示四舍五入把它判为达标。练习时保留颜色对、字号和原始结果。

规范说明：W3C：文字对比度

把文字、形状与标记一起纳入配色方案。

理解原理：颜色不应是传达信息或提示操作的唯一视觉方式。例如“红色项目必须填写”可以改成明确的“必填”文字，折线图可以增加不同线型或直接标注系列名称。

操作步骤：链接在正文中加入下划线，错误提示同时给出图标和原因，选中项增加边界或形状标记。需要识别的控件和图形还应核对非文字对比度要求，而非只测标签文字。

练习与检查：练习：把一张状态表转成灰度，看看能否分清待处理、成功和失败。如果含义消失，先补充文字标签，再调整色组。辅助线索应真实表达内容，避免只加没有含义的装饰符号。

规范说明：W3C：颜色的使用 · W3C：非文字对比度

先判断数据关系，再决定色组结构。

理解原理：类别没有天然大小关系时，使用能区分的分类色组，并配合标签。连续数值则需要有顺序的色阶，让颜色变化与数值变化保持一致。围绕零点等有意义中点的数据，可考虑发散色阶。

操作步骤：同一张报表里的相同类别应保持颜色一致。不要在每张图里随意重排色值，否则读者需要反复重新学习。小面积标记与大面积填充的观看效果不同，应在最终图形中检查。

练习与检查：练习：用同一组数据做柱状图和热力图。柱状图重点让类别与数值可读，热力图重点表达数值顺序；为两张图都补充文字数值或可读的数据表。

用颜色建立主次，别让每个区块都高亮。

理解原理：先写出读者必须记住的一句话，再安排标题、说明和行动信息。把色彩强调与这个优先级对齐，不要因为某个角落空着就再加一块鲜艳颜色。

操作步骤：在黑白版式中先确认标题和正文层级，然后引入强调色。若需要更多层次，优先调整间距、字号或字重；过多色彩编码会增加记忆负担。

练习与检查：练习：做一张展览信息卡，内容包括名称、主题、地点、日期和入场说明。把它缩到手机宽度，检查标题是否完整、时间是否好找，以及强调色是否真的指向重点。

固定内容和版式，才能看清改色带来的变化。

理解原理：把检查对象列成表：标题、正文、链接、按钮、提示、图表和焦点。为每项记录前景、背景、状态和发现的问题，避免只在大幅预览图上说“整体不错”。

操作步骤：先改影响阅读和识别的问题，再处理风格偏好。一次只改变一类角色，例如先修正次要文字，而不是同时改变字体、间距与所有色值。保留旧版用于对照。

练习与检查：练习：请一位同伴在不听解释的情况下找到主操作和错误原因。记录实际遇到的困难，不把个人偏好写成普遍结论；再对关键颜色对做数值检查。

把角色、用法和限制一起交给协作者。

理解原理：一份可执行的用色说明至少写清名称、色值、角色、适用背景和状态。相同色值可以有不同语义角色，但使用时仍应按角色管理，方便以后独立调整。

操作步骤：为主文字、次文字、表面、边界、操作和语义状态各提供一个真实组件。标注不能互换的用法，例如浅色提示底不能直接当正文色；深色模式应有独立对应值。

练习与检查：练习：把前面做过的卡片整理成一页规范，附上颜色对检查记录和修改原因。交给同伴重做一个组件，观察是否需要口头补充；需要补充的部分就是规范下一步应完善的内容。