颜色对比

背景和前景内容（通常是文本）之间的颜色对比应该足够大，以确保可读性。

在为不同的视力能力设计可读的界面时，WCAG 指南建议使用以下对比度比率

内容类型 最低比率（AA 等级） 增强比率（AAA 等级）
正文 4.5 : 1 7 : 1
大尺寸文本（比正文大 120-150%） 3 : 1 4.5 : 1
活动用户界面组件和图形对象（如图标和图形） 3 : 1 未定义

这些比率不适用于“附带”文本，例如非活动控件、标识或纯装饰性文本。

有关详细信息，请参阅下面的解决方案部分。

在您的网站上拥有良好的颜色对比度对所有用户都有益，但对于某些类型的色盲和其他类似情况的用户尤其有益，他们会遇到低对比度，并且难以区分相似的颜色。这是因为他们不像没有这些情况的人那样容易看到明亮和黑暗的区域，因此难以看到边缘、边框和其他细节。

在您的网站上拥有酷炫的设计固然很好，但如果您的用户无法阅读您的内容，那么该设计就毫无价值。

示例

让我们看看一些简单的 HTML 和 CSS 代码

html
<div class="good">Good contrast</div>
<div class="bad">Bad contrast</div>
css
div {
  /* General div styles here */
}

.good {
  background-color: #5a80a9;
}

.bad {
  background-color: #400064;
}

两段文本都具有其默认的黑色。

良好的对比度

“良好”的<div>具有霓虹蓝色的背景，这使得文本易于阅读

html
<div class="good">Good contrast</div>
css
div {
  font-family: sans-serif;
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  width: 250px;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 4px 4px 4px black;
}

.good {
  background-color: #5a80a9;
}

不良的对比度

另一方面，“不良”的<div>具有非常深的紫色背景，这使得文本难以阅读

html
<div class="bad">Bad contrast</div>
css
div {
  font-family: sans-serif;
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  width: 250px;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 4px 4px 4px black;
}

.bad {
  background-color: #400064;
}

解决方案

在为您的网站选择配色方案时，请选择具有良好对比度的前景和背景颜色。在您的设计约束条件下，尽可能提高颜色对比度——理想情况下，应达到 AAA 等级（请参阅下面的 1.4.6），但至少应满足 AA 等级（请参阅下面的 1.4.3）。

如果您包含非文本内容（如视频或动画），则应遵循 1.4.11（同样，请参阅下面）。

在您做出颜色选择时，可以使用 WebAIM 的颜色对比度检查器等工具检查对比度。

您还可以使用 Firefox 的开发者工具实时检查颜色对比度——请参阅无障碍检查器指南，尤其是检查无障碍问题部分。尝试在描述部分的实时示例中使用它。

1.4.3 最低对比度 (AA)

背景和前景内容之间的颜色对比度应达到最低水平，以确保可读性

  • 文本及其背景之间的对比度比率至少应为 4.5:1。
  • 标题（或只是较大的）文本的比率至少应为 3:1。较大的文本定义为至少 18pt 或 14pt 粗体。
1.4.6 增强对比度 (AAA)

此标准遵循并建立在标准 1.4.3 的基础上。

  • 文本及其背景之间的对比度比率至少应为 7:1。
  • 标题（或只是较大的）文本的比率至少应为 4.5:1。
1.4.11 非文本对比度 (AA)（在 2.1 中添加）

用户界面组件和图形对象的最小颜色对比度比率应为 3:1。

另请参阅