如何为网站选择清晰易读的配色
好的配色是每个人都能看清的配色。下面五个步骤帮助你在保留品牌色的同时，满足 WCAG 的对比度要求。
先检查品牌色
开始设计前，先在白色和黑色背景上检查主色。示例蓝色 #3366CC 在白底上为 5.36:1，普通文字符合 AA；但在黑底上只有 3.91:1，只适合大号文字。
两个方向都要检查：把这个颜色当作浅色背景上的文字，以及在按钮等这个颜色的背景上放白色或黑色文字。
通过调整亮度修正对比度
通常不需要换成别的颜色，只要在保持色相的前提下稍微调深或调浅就够了。工具中的推荐修正正是这样做的：
| 原色 | 白色背景 | 调整后 | 白色背景 |
|---|---|---|---|
| #FF0000 | 3.99:1 | #EE0000 | 4.53:1 |
| #FFA500 | 1.97:1 | #A66900 | 4.52:1 |
| #777777 | 4.47:1 | #767676 | 4.54:1 |
用深浅色阶搭建调色板
只有一个品牌色不足以完成整个界面。同一色相的浅色（与白色混合）和深色（与黑色混合）可以提供协调的背景、边框和悬停状态。以 #3366CC 为例，50% 浅色为 #99B3E6，50% 深色为 #1A3366。
浅色用作背景，深色用作文字，并检查实际用到的每一组文字和背景颜色。
不要只靠颜色传达信息
WCAG 成功标准 1.4.1“颜色的使用”（A 级）要求颜色不能是传达信息的唯一方式。很多色觉障碍者无法区分某些颜色，最常见的是红色和绿色。
正文中的链接要加下划线，错误提示要配图标或文字，图表线条要直接标注名称，而不是只依靠颜色图例。
检查清单
发布前请逐项确认：
- 正文文字与背景的对比度至少为 4.5:1。
- 大标题至少为 3:1。
- 输入框边框、焦点框和图标至少为 3:1。
- 链接、错误和必填项不只用颜色标示。
- 图片或渐变上的文字，按其背后最亮的部分检查。