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

DT4非文字對比

規則識別碼

DT4

規則名稱

非文字對比

規則類型

原子規則

規則說明

使用者介面元件和圖形物件內容的視覺呈現與相鄰顏色的對比度至少為3:1。

無障礙要求對應

網站無障礙規範

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

適用性

適用於可辨識設計內容。

期望

非文字元件與相鄰元件或元素應可明顯區分。

假設條件

邊框變粗或文本變粗可能是指標的變化。

組件的單獨標籤(例如,輸入或複選框的標籤)不算作組件的視覺指示器,但是當標籤是組件(例如,鏈結/按鈕)時,則不需要視覺指示器。

無障礙支援

此規則沒有已知的主要無障礙功能支援問題。

測試案例:

作業系統

iOS

Android

HTML

測試程序

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

參考詞彙:無

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

參考資源:

  1. 1.4.11: Non-text Contrast,Web Content Accessibility Guidelines (WCAG) 2.1
  2. https://alastairc.uk/tests/wcag21-examples/non-text-contrast.html