跳至主要內容
What's New


良好作業模式1.7 – 提供足夠的顏色對比度 (基礎級別)


在視覺呈現的網頁內容與其背景顏色之間應有適當的對比度,至少:

  • 文字文本為 4.5:1
  • 互動元素或圖形物件 (對使用者有意思的) 為 3:1

其背景使內容易於閱讀

 

場景1

修正前 修正後
流動應用程式的按鈕「繁體中文」及未勾選狀態的切換按鈕「講座」、「工作坊」與背景的顏色對比度欠佳,有礙閱覽。 在顯示顏色對比度提高後,按鈕文字及切換按鈕更易於閱覽。
在以上示例中,按鈕「繁體中文」及未勾選狀態的切換按鈕「講座」、「工作坊」與背景的顏色對比度欠佳,有礙閱覽。 顏色對比度提高後,按鈕文字及切換按鈕更易於閱覽。網上提供了各種檢測顏色對比的工具,可協助流動應用程式開發人員進行顏色對比度測試。

場景2

修正前 修正後
在啟用深色模式後沒有足夠的對比度,導致閱讀困難。 修正對比度後,方便使用者閱讀。
啟用深色模式後,標題文字、按鈕文字與背景沒有足夠的對比度,導致閱讀困難。 修正後,標題文字和按鈕文字可以方便使用者閱讀。

 

W3C WCAG 參考: 1.4.3 對比度 (最低)1.4.11 非文字對比