header-logo
了解如何以 Wix 建立網站和商家。
了解如何建立、管理並維護 Wix 網站。
管理訂閱、方案與請款單。
處理業務,與會員連繫。
學習如何購買、連結或轉移網站網域。
以進階功能提升效率。
尋求解決方法,了解已知問題,或聯絡我們。
placeholder-preview-image
以課程和教學加強技能。
學習網頁設計、行銷等範疇的秘訣。
學習如何提升來自搜尋引擎的自然網站流量。
以全端平台建立自訂網站。
與專家配對,幫助實現目標。
placeholder-preview-image

無障礙:準備文字和圖形

5 分鐘
患有視覺疾病或障礙的訪客可能難以區分網站頁面前景與背景。因此,建議根據需要檢查並調整網站的色彩對比度。

建議

若要為具有不同視覺需求的訪客提高無障礙程度,建議執行以下操作:
  • 將文字色彩與背景色彩對比度更改為:一般文字比例 4.5:1,大型文字比例 3:1。
  • 圖形和使用者介面組件(例如表單輸入邊框、預留位置等)的對比度比例至少為 3:1。
  • AAA 級要求更高的對比度比例:一般文字至少 7:1,大型文字至少 4.5:1。
實用資訊:
大型文字界定為 14 點(約 18 像素)以上且為粗體,或是 18 點(約 24 像素)以上。

尋找色彩程式碼

無論使用哪款網站建置器(Wix 編輯器、Studio 編輯器或 Harmony 編輯器),皆可找到色彩程式碼。
  1. 選擇相關元件(文字、條紋背景、容器方塊等)並存取色彩選擇器
  2. 將游標浮動於任何色彩上方即可查看色彩程式碼。
Wix 編輯器中的色彩選擇器。游標正浮動於色彩上方,面板上的程式碼已強調顯示。
測試色彩對比度:
有許多網站和瀏覽器外掛程式(例如 Contrast Checker)可透過比較前景和背景色彩(使用色彩程式碼)來測試色彩對比度。若要檢查背景圖片上的文字色彩對比度,建議使用 Colour Contrast Analyser,讓您選取背景色彩後進行測試。

調整色彩對比度

無論使用哪款網站建置器,皆可使用編輯器中的無障礙精靈來尋找並調整網站上任何低色彩對比度。精靈會掃描網站中潛在的無障礙問題,並強調改善網站無障礙程度的方法。
針對多數元件,您可直接在精靈中進行變更。然而,部分元件(例如應用程式元件)目前尚未與精靈完全整合,需要手動檢閱或調整。
  1. 前往編輯器
  2. 點擊編輯器頂部的設定
  3. 選擇無障礙精靈
  4. 選擇掃描網站
  5. 點擊偵測到的問題索引標籤。
  6. 從清單中選擇頁面。
  7. 點擊改善色彩對比度
  8. 選擇相關元件並視需要進行調整:

手動檢閱色彩對比度

網站上可能存在無障礙精靈無法識別的色彩對比度。建議使用 Wix Contrast Checker 手動檢閱網站內容,並根據需要調整對比度。
您可從網站建置器(Wix 編輯器或 Studio 編輯器)安裝並使用色彩對比度檢查工具。若元件未符合要求,也可使用選擇器測試新比例。

若要檢查對比度:

  1. (僅限首次)在編輯器中安裝附加元件
  2. 點擊編輯器右上角的工具
  3. 點擊編輯器附加元件
  4. 點擊色彩對比度檢查工具
  5. 使用色彩方塊在檢查工具中選擇元件和背景的色彩,或貼入相關色彩程式碼
Wix 編輯器中的色彩對比度檢查工具。已選擇色彩方塊並開啟色彩選擇器。對比度不合格。

若要調整對比度:

  1. 在色彩對比度檢查工具中將前景和背景色彩調整至建議比例。
  2. 從選擇器右下角複製色彩程式碼。
  3. 在編輯器中選擇相關元件。
  4. 從元件的設計設定中開啟色彩選擇器。
  5. 點擊我的色彩旁的新增
  6. 將複製的程式碼貼入欄位中。
已在選擇器中選擇新色彩,且對比度合格。色彩程式碼已強調顯示。
提示:
開啟設計設定的方式取決於元件,但通常可透過選擇元件,然後點擊「設計」圖示 設計 即可找到。
要在網站上顯示圖表或資料嗎?
高對比度色彩是在網站上顯示資料的絕佳方式。然而,也建議使用其他指標(例如材質和圖樣)來區分資訊。
後續步驟:
返回無障礙檢查清單,繼續改善網站的無障礙功能。