跳到主要內容
  • 字級
:::|

DT2文字對比

規則識別碼

DT2

規則名稱

文字對比

規則類型

原子規則

規則說明

小文字(小於 18 點標準/14 點粗體)需符合 4.5:1 ;大文字(大於 18 點標準/14 點粗體)需符合 3.0:1

無障礙要求對應

網站無障礙規範

  • 1.4.3 對比值(最小) (檢測等級AA)
    • 必須符合 WCAG 2.0和WCAG 2.1 A級或更高級別
    • 結果對應:
      • 任何失敗結果:不符合
      • 所有成功結果:需進一步測試
      • 未適用結果:需進一步測試

適用性

適用於可辨識設計內容。

期望

以下檢查均正確:

  • 一般文字與文字圖片對比度至少4.5:1以上。
  • 大文字,至少18pt(24px)或14pt(18.66px)粗體字,對比度至少3:1以上。

假設條件

成功準則1.4.3對比值(最小)有“偶然”文本的例外,其中包括無效的使用者界面元件和裝飾性文本。該規則假定應忽略的文本節點已從輔助技術中禁用或隱藏。如果不是這種情況,則文本節點可以使該規則失敗,而仍然可以滿足成功準則。

成功準則1.4.3對比值(最小)也有標誌圖徽和品牌名稱的例外。由於標誌圖徽和品牌名稱通常透過圖片顯示,以確保正確呈現,因此此規則不考慮標誌圖徽或品牌名稱。如果使用文本節點包含標誌圖徽或品牌名稱,則文本節點可能會失敗,而仍然可以滿足成功準則。

具有相同前景色和背景色(對比度為1:1)的文本不被視為“文本的視覺呈現”,從而使其未適用於成功準則。根據內容,以其他方式成功隱藏的文本仍然可能導致其他無障礙問題。

無障礙支援

  • iOS/Android:此規則沒有已知的主要無障礙功能支援問題。
  • HTML:不同的瀏覽器對CSS的支持程度不同。可能會導致一種瀏覽器中沒有出現的對比度問題。因此,根據所使用的瀏覽器,此規則可能會產生不同的結果。例如,使用CSS變換定位的文本可能在不支持CSS變換的瀏覽器中處於不同的背景。

測試案例:

作業系統

iOS

Android

HTML

範例說明

盡可能使用標準iOS顏色於按鈕、文字與其他使用者介面物件,或確保前景與背景提供足夠的對比度:

  • 對於文字或文字圖片,避免背景顏色或使用背景顏色相對前景顏色有足夠的對比度。
  • 如果使用背景顏色,則前景顏色需使用4.5:1的對比度。

盡可能使用標準Android顏色於按鈕、文字與其他使用者介面物件,或確保前景與背景提供足夠的對比度:

  • 對於文字或文字圖片,避免背景顏色或使用背景顏色相對前景顏色有足夠的對比度。
  • 如果使用背景顏色,則前景顏色需使用4.5:1的對比度。
  • 對於文字或文字圖片,避免背景顏色或使用背景顏色相對前景顏色有足夠的對比度。
  • 如果使用背景顏色,則前景顏色需使用4.5:1的對比度。

測試程序

  1. 啟動應用程式。
  2. 找到具有背景顏色的文字樣本與僅由顏色標識的鏈結。
  3. 驗證顏色值:
    • 螢幕截圖。
    • 將圖片透過電子郵件發送或同步到電腦。
    • 查看要測試的頁面的圖片。
    • 使用滴管工具確定內容的前景色和背景色,以獲取背景色和前景色的顏色值。
  4. 手動檢查元素的顏色定義。
  5. 使用可靠的工具(例如Snook.ca顏色對比檢查|Webaim顏色對比檢查器|TPG顏色對比分析器|Android無障礙掃描工具|)來檢查對比度是否足夠。
  6. 將前景和背景值輸入到色彩對比分析器中。
  7. 驗證是否滿足亮度要求,並且顏色對比度符合標準尺寸和非粗體文字的最小比例4.5:1。

參考詞彙:無

變更記錄:20200817-第1次編撰。

參考資源:

  1. Colour contrast, 2019/2017 BBC行動裝置無障礙指南(MOBILE ACCESSIBILITY GUIDELINES)。
  2. G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text, Techniques for WCAG 2.0。