顏色對比

背景和前景內容（通常是文字）之間的顏色對比應該足夠大，以確保可讀性。

在為不同的視力能力設計可讀的介面時，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。

另請參閱