UI 设计中的色彩对比度实用指南
为什么色彩对比度是优秀设计的支柱
色彩对比度是两种颜色之间亮度（辉度）的差异。在 UI 设计中，这通常指文本与其背景之间的对比度。
虽然这看似一个微不足道的细节，但它却是可用性和可访问性最关键的方面之一。良好的对比度确保您的内容对每个人都清晰可读，包括：
- 低视力人群。
- 有色觉缺陷（色盲）的用户。
- 任何在明亮阳光下或昏暗房间里使用屏幕的人。
- 使用低质量显示器的用户。
简而言之，为良好的对比度而设计就是为每个人而设计。它是包容性设计的基础元素。
理解 WCAG 对比度
Web 内容可访问性指南 (WCAG) 提供了一种清晰的、数学化的方法来衡量对比度。该比率范围从 1:1（白底白字）到 21:1（白底黑字）。
您需要了解两个主要的合规级别：
AA 级（标准）
这是最常见的可访问性目标，并且是许多网站的法律要求。
- 普通文本： 要求对比度至少为 4.5:1。
- 大号文本： 要求对比度至少为 3:1。
- WCAG 将“大号文本”定义为 18pt (24px) 或更大，或 14pt (18.66px) 且为粗体。
AAA 级（增强）
这是一个更严格的标准，适用于可读性至关重要的网站，如文本密集的文章或政府网站。
- 普通文本： 要求对比度至少为 7:1。
- 大号文本： 要求对比度至少为 4.5:1。
您可以使用我们的免费色彩对比度检查工具立即根据这些标准检查您自己的颜色组合。
设计的快速检查（在测量之前）
在您打开工具之前，就可以通过这些简单的技巧发现潜在问题。
- 眯眼测试： 远离屏幕，眯起眼睛直到设计变得模糊。您的文本或 UI 元素是否融入了背景？如果难以区分，您的对比度可能太低。
- 灰度测试： 将您的设计转换为灰度图。如果您无法轻松区分元素或阅读文本，那么您过分依赖颜色而忽略了对比度。重要信息在黑白模式下也应清晰可见。
虽然这些测试很有帮助，但它们是主观的。请务必使用可靠的工具来确认您的结果。
如何修复低对比度颜色
修复低对比度并不意味着您必须放弃您的品牌调色板。通常，只需要进行一些小的、有针对性的调整。
假设您在白色背景 (#FFFFFF) 上有浅灰色文本 (#888888)。这只有 2.9:1 的对比度，未达到普通文本的 AA 标准。
以下是您的选择：
1. 加深文本（或调亮背景）
这是最直接的修复方法。通过将文本颜色更改为更深的灰色，如 #767676，对比度跃升至 4.54:1，通过了 AA 标准。这种微小的调整在美学上通常不易察觉，但在可读性上却有巨大差异。
2. 增加字体大小或粗细
如果您坚持使用特定颜色，可以通过增加其大小来使其通过标准。在我们的例子中，如果 #888888 的文本变大并加粗（例如，14pt 粗体或 18pt 常规），其 2.9:1 的对比度虽然对普通文本不合格，但几乎通过了大号文本 3:1 的要求。这对于标题来说是一个不错的选择。
3. 不要仅依赖颜色
对于像链接或错误状态这样的 UI 元素，永远不要仅使用颜色作为唯一的指示器。
- 链接： 一个低对比度的蓝色链接可能很难看清。确保所有链接都有下划线，尤其是在正文文本中。
- 错误信息： 不要只把文本变成红色。添加一个图标（如警告三角）和粗体文本来吸引对信息的注意。
黄金法则
如有疑问，力求所有重要文本的对比度达到 4.5:1。这条简单的规则将确保您的设计具有可访问性、专业性，并且易于所有人使用。让对比度检查成为您设计流程的常规部分，而不是事后才考虑的事情。