無障礙:準備文字和圖形
5 分鐘
患有視覺疾病或障礙的訪客可能難以區分網站頁面前景與背景。因此,建議根據需要檢查並調整網站的色彩對比度。
建議
若要為具有不同視覺需求的訪客提高無障礙程度,建議執行以下操作:
- 將文字色彩與背景色彩對比度更改為:一般文字比例 4.5:1,大型文字比例 3:1。
- 圖形和使用者介面組件(例如表單輸入邊框、預留位置等)的對比度比例至少為 3:1。
- AAA 級要求更高的對比度比例:一般文字至少 7:1,大型文字至少 4.5:1。
實用資訊:
大型文字界定為 14 點(約 18 像素)以上且為粗體,或是 18 點(約 24 像素)以上。
尋找色彩程式碼
無論使用哪款網站建置器(Wix 編輯器、Studio 編輯器或 Harmony 編輯器),皆可找到色彩程式碼。
Wix 編輯器
Studio 編輯器
Wix Harmony 編輯器
- 選擇相關元件(文字、條紋背景、容器方塊等)並存取色彩選擇器。
- 將游標浮動於任何色彩上方即可查看色彩程式碼。

測試色彩對比度:
有許多網站和瀏覽器外掛程式(例如 Contrast Checker)可透過比較前景和背景色彩(使用色彩程式碼)來測試色彩對比度。若要檢查背景圖片上的文字色彩對比度,建議使用 Colour Contrast Analyser,讓您選取背景色彩後進行測試。
調整色彩對比度
無論使用哪款網站建置器,皆可使用編輯器中的無障礙精靈來尋找並調整網站上任何低色彩對比度。精靈會掃描網站中潛在的無障礙問題,並強調改善網站無障礙程度的方法。
針對多數元件,您可直接在精靈中進行變更。然而,部分元件(例如應用程式元件)目前尚未與精靈完全整合,需要手動檢閱或調整。
Wix 編輯器
Studio 編輯器
Wix Harmony 編輯器
- 前往編輯器。
- 點擊編輯器頂部的設定。
- 選擇無障礙精靈。
- 選擇掃描網站。
- 點擊偵測到的問題索引標籤。
- 從清單中選擇頁面。
- 點擊改善色彩對比度。
- 選擇相關元件並視需要進行調整:
在精靈中調整對比度
手動調整對比度
手動檢閱色彩對比度
網站上可能存在無障礙精靈無法識別的色彩對比度。建議使用 Wix Contrast Checker 手動檢閱網站內容,並根據需要調整對比度。
您可從網站建置器(Wix 編輯器或 Studio 編輯器)安裝並使用色彩對比度檢查工具。若元件未符合要求,也可使用選擇器測試新比例。
Wix 編輯器
Studio 編輯器
若要檢查對比度:
- (僅限首次)在編輯器中安裝附加元件。
- 點擊編輯器右上角的工具
。 - 點擊編輯器附加元件。
- 點擊色彩對比度檢查工具。
- 使用色彩方塊在檢查工具中選擇元件和背景的色彩,或貼入相關色彩程式碼。

若要調整對比度:
- 在色彩對比度檢查工具中將前景和背景色彩調整至建議比例。
- 從選擇器右下角複製色彩程式碼。
- 在編輯器中選擇相關元件。
- 從元件的設計設定中開啟色彩選擇器。
- 點擊我的色彩旁的新增。
- 將複製的程式碼貼入欄位中。

提示:
開啟設計設定的方式取決於元件,但通常可透過選擇元件,然後點擊「設計」圖示 設計
即可找到。
要在網站上顯示圖表或資料嗎?
高對比度色彩是在網站上顯示資料的絕佳方式。然而,也建議使用其他指標(例如材質和圖樣)來區分資訊。
後續步驟:
返回無障礙檢查清單,繼續改善網站的無障礙功能。



。