颜色对比度

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

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

内容类型	最低比率（AA 级）	增强比率（AAA 级）
正文文本	4.5 : 1	7 : 1
大号文本（比正文文本大 120-150%）	3 : 1	4.5 : 1
活动的 UI 组件和图形对象，如图标和图表	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;
}