WCAG 对比度指南：如何设计无障碍且美观的界面？
在追求美观的同时，我们不能忽视无障碍性。为什么文字对比度必须达到 4.5:1？如何平衡品牌色与可读性？本文将深入探讨 WCAG 标准在实际项目中的应用与解决方案。
设计不仅仅是为了赏心悦目，更是为了传递信息。如果用户看不清你写的字，那么再美的设计也是失败的。在全球范围内，约有 10 亿人患有某种形式的视力障碍。Web 内容无障碍指南 (WCAG) 为此制定了明确的标准。而在所有无障碍指标中，色彩对比度 (Contrast Ratio) 是最基础、也最容易被忽视的一项。
为什么是 4.5:1？
WCAG 2.1 AA 标准规定，普通文本与背景的对比度至少要达到 4.5:1。这个数字并非随意设定，而是基于 ISO 标准和对各类人群的广泛研究得出的。
- 低视力人群： 随着年龄增长，人眼晶状体变黄、硬化，进光量减少，对低对比度细节的分辨能力显著下降。
- 色盲人群： 对于红绿色盲等色觉障碍者，仅仅依靠色相差异是不够的，必须有足够的明度差异才能区分内容。
- 场景因素： 即使视力正常的用户，在强光下看手机（如户外阳光直射）或在低亮度屏幕模式下，如果对比度不足，也无法看清内容。
注： 对于大号文本（大于 18pt 或 14pt 粗体），标准放宽至 3:1；对于纯装饰性元素或 Logo，没有对比度要求。
常见的对比度陷阱
❌ 浅灰色的文字
设计师常为了追求“高级感”或“层次感”，使用浅灰色 (#999, #CCC) 来显示次级信息。但这往往是可读性的杀手，特别是对于老年用户。
❌ 品牌色作为背景
很多品牌的标准色（如亮橙色、浅绿色）直接作为按钮背景时，上面的白色文字对比度往往是不达标的（通常在 2:1 到 3:1 之间）。
解决方案与最佳实践
1. 使用工具检测
不要相信你的肉眼。在设计阶段，就应该使用 Figma 插件（如 Stark）或我们提供的在线对比度检测工具来验证每一个配色组合。
2. 调整品牌色（Accessible Palette）
如果你的品牌主色对比度不够，不要直接放弃，可以尝试微调：
- 文字用深色变体： 将品牌色用于大标题或图标，正文使用更深、更易读的颜色（如深灰 #333）。
- 背景用浅色变体： 如果需要在品牌色背景上放字，可以使用该颜色的深色版本作为背景，或者使用极浅的品牌色背景搭配深色文字。
- 按钮文字反转： 如果按钮背景较浅，不要强制用白色文字，改用深色文字（如黑色或深品牌色）。
3. 增加字重
对于对比度处于边缘（如 3.5:1）的颜色，使用更粗的字体（Bold/Semibold）可以增加笔画的视觉面积，从而弥补可读性的不足。这符合 WCAG 对大号文本的标准放宽逻辑。
4. 不要仅依靠颜色传达信息
这是 WCAG 的另一条重要原则。例如，在表单报错时，不要只把边框变成红色。因为色盲用户可能无法区分红色和灰色的边框。必须同时提供文字说明（如“输入格式错误”）或图标提示。
总结： 无障碍设计不是一种限制创意的枷锁，而是一种包容的体现。一个高对比度、清晰易读的界面，不仅对视障人士友好，也能提升所有用户在各种环境下的使用体验。这本身就是优秀设计的标志。
