如果你的願景良好，可能會假設每個人都看到的顏色或文字易讀性都相同。當然，但情況並非如此。您可能也想到，有些人看得懂的色彩組合並不容易，有些人根本無法理解。這通常是因為色彩對比 (前景與背景色彩亮度的關係) 所致。如果顏色相似，對比度就會偏低；如果顏色差異比較大，對比度就會較高。
WebAIM 指南建議所有文字的 AA (最小) 對比率為 4.5:1。 但非常大的文字 (比預設內文大 120-150%) 例外，其比例可降至 3:1。請注意這裡顯示對比度中的差異：
我們為 AA 等級選擇 4.5:1 的對比率，是因為視覺損失與約 20/40 視力相等的使用者通常遇到的對比敏感度有所下降。20/40 通常被報告為 80 歲以下人的典型視覺濃度對於低視能或顏色缺失的使用者，我們可以提高內文文字的對比度，最高為 7:1。
您可以使用 Lighthouse 的無障礙功能稽核功能檢查色彩對比。執行報表的步驟如下：
- 開啟開發人員工具。
- 按一下「稽核」。
- 選取 [無障礙設定]。
Chrome 還提供實驗功能，可協助您偵測網頁上所有的低對比文字。此外，您也可以使用無障礙顏色建議修正低對比文字。
如需更完整的報告，請安裝無障礙功能洞察擴充功能。 其快速通行證報表會包含色彩對比檢查失敗的所有元素詳細資料。
進階感知對比演算法 (APCA)
進階感知對比演算法 (APCA) 是一種以色彩感知的新型研究為基礎計算對比的新方法。
對比度是根據下列功能計算而得：
- 空間屬性 (字型粗細和文字大小)
- 文字顏色 (感知文字和背景之間的亮度差異)
- 背景資訊 (環境光源、周遭環境和文字的預期用途)
Chrome 提供實驗功能，用於取代 APCA 的 AA/AAA 對比度規範。
不要只用顏色傳達資訊
全球約有 3.2 億人患有色覺障礙。大概有 1/12 和 1/200 的女性都有某種形式的色盲，這表示大約五%的使用者無法以您預期的方式體驗網站。仰賴顏色來傳達資訊，將數字推送至違規程度。
舉例來說，在輸入表單中，電話號碼可能會以紅色底線標示，表示電話號碼無效。對色彩不足或螢幕閱讀器的使用者而言，資訊會以錯誤的方式傳達，甚至完全不傳達。因此，您應一律嘗試提供多個途徑，讓使用者存取重要資訊。
第 1.4.1 節的 WebAIM 檢查清單指出「不應做為傳達內容或區分視覺元素的唯一方法」。另請注意，除非符合特定對比要求，否則「不應只用來區分連結與周圍文字」。因此，檢查清單會建議您新增其他指標，例如底線 (使用 CSS text-decoration 屬性) 來表示連結啟用時間。
修正上述範例的基本方法，是在欄位新增額外訊息，宣告該訊息無效以及原因。
建構應用程式時，請特別留意以下幾點，並留意可能會過度仰賴顏色的區域，以傳達重要資訊。
如果您想瞭解不同使用者對網站呈現的樣子，或非常仰賴 UI 的顏色，可以使用開發人員工具模擬各種視障情形。Chrome 提供模擬視覺障礙功能。如要使用這項工具，請開啟開發人員工具，然後在導覽匣中開啟「Rendering」分頁。然後，您可以模擬下列顏色缺失：
- 紅色弱視：無法察覺任何紅燈。
- 綠色弱視：無法察覺任何綠光。
- 藍色盲：無法辨識任何藍光。
- 全色盲：無法辨認任何顏色，但灰色陰影除外 (極罕見)。
高對比模式
高對比模式可讓使用者反轉前景和背景顏色，通常有助文字脫穎而出。對於視障人士來說，高對比模式可讓您更輕鬆瀏覽網頁上的內容。您可以透過下列幾種方式在電腦上進行高對比設定：
Mac OSX 和 Windows 等作業系統提供高對比模式，可在系統層級為所有處啟用。
建議您開啟高對比設定，確認應用程式中的所有 UI 是否仍可見且可供使用。
舉例來說，導覽列可能會使用細微的背景顏色來表示已選取的頁面。如果在高對比擴充功能中查看，那一點就會完全消失，而讀者可藉此瞭解目前使用哪個網頁。
同樣地，在前述例子中，無效電話號碼欄位中的紅色底線可能會以藍色和綠色難以區分。
如果您符合先前所述的對比率，應該就能支援高對比模式。但為了更保障您的安全，建議您安裝高對比 Chrome 擴充功能，然後對您的網頁執行一次檢查，確認一切運作正常和外觀符合預期。