设计术语词典色彩关系 / 设计术语词典
色相与对比度：颜色如何传递信息
两个颜色看上去不同，不代表文字就容易辨认。色相可帮助分类，文字与背景之间仍要有足够的明暗区分。
词条定义
- 色相 Hue
- 用于描述红、黄、蓝等颜色类别的属性；单独改变色相不等于获得足够的文字明暗区分。
- 对比度 Contrast
- 一般设计讨论中指元素之间的差异程度；本文具体讨论网页文字与背景基于相对亮度计算的对比度比值。
一个具体例子
原创教学示例：展览页用粉色表示讲座、紫色表示工作坊。如果只给卡片涂色，读者需要记忆颜色含义；加上“讲座”“工作坊”文字标签后，分类信息便有了另一条表达通道。按钮可以保留品牌色，但按钮文字需要单独检查与背景的对比关系。
把两个概念分清
| 观察对象 | 描述什么 | 使用边界 |
|---|---|---|
| 色相分类 | 用于区分栏目或建立视觉气氛。 | 不要仅凭两种颜色不同就判断文字清楚。 |
| 文字对比度 | 以文字前景与实际背景的相对亮度关系计算比值。 | 一个比值通过不代表整个页面可访问性通过。 |
怎样观察与修改
- 列出前景文字和它实际落在的背景颜色；渐变与图片背景应关注较难辨认的位置。
- 用可靠的对比度检查器计算，而不是仅凭自己的屏幕观感判断。
- 需要改善时，尝试加深文字或减淡背景，保留配色目的并重新检查。
- 检查分类和状态是否还有文字或图形说明，再复核悬停、焦点等状态。
适用情景与限制
适用于网页正文、按钮标签与信息卡片。WCAG 2.2 的文字最小对比度成功准则中，普通文字要求至少4.5:1；大号文字至少3:1。大号文字的定义、标识与非活动组件等例外应结合原文判断，不能把3:1当成所有文字的通用阈值。
相关定义核对：W3C WAI：理解文字最小对比度（WCAG 2.2）。示例及改稿步骤为本站原创说明。
动手练习
从一张卡片记录标题、说明和标签三组前景／背景颜色。逐组检查后，写下修改的是颜色用途还是明暗关系，避免一键替换让所有层级消失。
常见问答
品牌色太浅必须删除吗？
可以用于适当的背景或装饰，也可以为文字另选更深的颜色。先分配用途，再决定颜色。
对比度达标就一定好读吗？
不一定。字体、字号、行距和背景复杂程度仍会影响实际阅读，数字只覆盖特定的检查项。