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