概略說明三種工具和技巧，可用來測試及驗證設計的無障礙色彩對比。
假設您在淺色背景上顯示文字，如下所示：
雖然所有範例可能都能看得見，但並非每位範例都適合您。
無障礙色彩對比是一種做法，可確保所有人都能閱讀文字。有時測試對比度很簡單，有時則相當困難。在本文結束時，您將有三種新的工具和技術來檢查、修正及驗證網頁設計對比，協助您應對最困難的情境。
WCAG 和色彩對比
W3C 的 Web Accessibility Initiative 提供策略、標準和資源，確保網際網路可供盡可能多的使用者存取。奠定這些標準的基礎指南，稱為《無障礙網頁內容規範》(WCAG)。最新的穩定版 WCAG 2.1 包含重要的無障礙需求：最低對比度。
WCAG 2.1 中兩種顏色之間的關係，可透過對比度比率來說明，也就是比較兩種顏色亮度時所得出的數字。亮度是一種描述顏色與黑色 (0%) 或白色 (100%) 相近程度的方式。WCAG 針對要讓網頁存取所需的對比比例，定義了一些規則和計算演算法。不過，這項計算有已知問題。我們最終會採用更可靠的方法，但目前 WCAG 是我們能採用的最佳做法。
規則為何？
對比度越高，分數就越高，例如 4.5 或 7 分，而非 3 分。如要進一步瞭解評分資料表，請參閱 Polypane 的對比檢查工具。
測試顏色之間的對比
既然我們知道要尋找什麼，那麼該如何進行測試呢？以下提供三個免費工具，協助您檢查、修正及評估網站的對比度。我們會說明各項工具的優缺點，讓您可以放心地以多種方式測試網站顏色和內容的無障礙功能。
- Pika
Mac OS 應用程式，可獨特顯示整個螢幕上任何顏色的對比度、漸層上的顏色、透明顏色等等。意圖明確，使用者會手動選擇要比較的像素。自動化程度略低，但功能大幅提升。 - VisBug
跨瀏覽器擴充功能，可獨特地一次顯示多個對比疊加，但與 DevTools 一樣，有時無法偵測意圖。 - Chrome 開發人員工具
：開發人員工具內建於 Chrome 中，提供多種檢查、修正和偵錯色彩問題的方式，但在檢查漸層和半透明色彩時有缺點，有時無法偵測意圖。
Pika (macOS 應用程式)
如果開發人員工具或 VisBug 無法正確評估對比度，例如需要在瀏覽器外測試顏色，或是涉及透明度或漸層，那麼 Pika 就是救星。Pika 是系統工具，而非網路工具，因此可以存取畫面上的每個像素。
這也表示使用 Pika 與開發人員工具或 VisBug 有不同。DevTools 和 VisBug 會盡力顯示瀏覽器 DOM 中的文字和背景顏色，而 Pika 比較的顏色則是從畫面上的任何位置手動選擇。這可讓 Pika 享有更多控制權，並提供更多用途：
- 比較任何兩種顏色，無論是否在瀏覽器中，只要您能在螢幕上看到顏色，即可進行測試。
- 比較顏色與透明度。
- 比較漸層中的顏色。
- 比較使用混合模式的顏色，例如 CSS 中的 mix-blend-mode。
比較任何兩種顏色
比較文字與背景顏色：
比較向量圖形的筆觸和填滿顏色：
比較顏色與透明度
比較文字顏色與各種背景範例像素。在這個例子中，系統會使用冰霜玻璃效果中的最淺灰色做為背景比較顏色。
比較色彩與漸層
比較漸層或圖片上的文字。以下是「Lasso」的 L 與圖片的淺藍色比較：
VisBug
VisBug 是 FireBug 帶來靈感的工具，可讓設計人員和開發人員以視覺元素檢查網站設計、進行偵錯和玩遊戲。這項工具模擬了使用者熟悉且喜愛的設計工具 UI 和 UX，因此比 Chrome 開發人員工具的使用門檻更低。
試用 VisBug，或在 Chrome、Firefox、Edge、Brave 或 Safari 上安裝。
其中提供的工具之一就是無障礙檢查工具。
跨瀏覽器 (甚至在行動裝置上) 檢查
使用者點選無障礙工具檢查工具後，只要使用者指向的任何項目 (或鍵盤瀏覽的內容)，工具提示中就會顯示相關的無障礙資訊。這個工具提示包含所偵測到前景色和背景色之間的顏色比較。
檢查一或多個
開發人員工具可以檢視單一色彩配對，或是取得頁面上所有顏色配對的報表，但 VisBug 可透過允許多種顏色配對，為你提供良好的中間區域。按一下元素，工具提示就會停留在原處。按住 Shift 鍵後繼續點選其他元素，工具提示也會保持不變：
這對以元件為基礎的設計來說尤其重要，因為元件的多個部分都必須通過對比率分數。這個方法可讓您一次查看所有元件部分。也非常適合用於設計審查。
Chrome 開發人員工具
如果您已安裝 Chrome，就已具備許多對比測試工具：
Chrome 開發人員工具顏色挑選器
在 Chrome 開發人員工具「元素」面板的「樣式」窗格中，顏色值旁會顯示小方形色票。點選這個色塊後，您會看到顏色挑選器工具。盡可能讓工具中間顯示顏色與前景或背景的對比度。
在以下範例中，系統會開啟自訂屬性顏色值的顏色挑選器。對比度比分為 15.79，並顯示兩個綠色勾號，表示比分通過 AA 和 AAA WCAG 2.1 規定：
顏色挑選器自動更正功能
在挑選顏色時查看分數很方便，但 Chrome 開發人員工具還有其他自動修正功能。顏色挑選器回報無法存取的顏色對比分數時，您可以展開顯示 AA 和 AAA 分數目標，以及滴管工具。AA 和 AAA 旁邊是色票和重新整理圖示，使用者點選後就能找到最接近的傳遞顏色：
如果您對色彩沒有特別要求，自動校正功能是符合無障礙指南的絕佳方式，而且不必費心就能完成任務。
檢查工具提示
元素選取工具在頁面懸停時具有特殊功能，可回報一般字型、顏色和無障礙資訊。元素選取工具是下方螢幕截圖左側的圖示。這個方塊的右下角有箭頭游標。您也可以使用快速鍵 Control+Shift+C (或在 macOS 上使用 Command+Shift+C) 選取這項功能。
啟用後，圖示會變成藍色，並且在指向網頁中的任何項目時，會顯示下列快速檢查工具提示：
這項工具不需要您在「樣式」窗格中尋找色塊，而是讓您在網頁上隨意移動滑鼠，即可查看對比分數。與顏色挑選器一樣，一次只能顯示一個對比分數。
Bump bump 'til you pass 🎶
我經常使用這項快速檢查工具檢查配色，發現配色剛好達到規定比率。我沒有使用顏色挑選工具的自動修正功能 (因為我很挑剔)，而是在 CSS 中調整色彩頻道，並觀察結果，直到我獲得所需的比例為止。我將這個程序稱為「bump bump til you pass」，因為我會不斷增加顏色管道編號，直到通過 WCAG 2.1 為止。
步驟如下，且必須按照正確順序完成：
- 在「樣式」面板中，將鍵盤焦點設在顏色內。
- 使用鍵盤快速鍵
Control+Shift+C(或 MacOS 上的Command+Shift+C) 啟用檢查元素工具。 - 將游標移至目標。
- 按下鍵盤上的向上/向下鍵，即可變更顏色值中的數字。
這項功能之所以有效，是因為 CSS 樣式值仍使用鍵盤焦點，而滑鼠則允許指向目標。請務必不要點選目標，否則焦點會從顏色值區域移開，且在重新聚焦前，您將無法再調整值。
CSS 總覽
到目前為止，Chrome 開發人員工具已提供一次查看一組配色的方式，但 CSS 總覽可以檢索整個網頁，並一次顯示所有無法存取的配色組合：
如要進一步瞭解這項功能，請參閱這篇文章「CSS 總覽：找出 CSS 改進空間」，或觀看 Jecelyn Yeen 在 YouTube 上的「DevTools 提示」系列影片，瞭解如何使用 CSS 總覽面板找出 CSS 改進空間。
燈塔
Lighthouse 是 Chrome 開發人員工具中的另一項稽核工具。這項工具可檢索網頁，並回報無法存取的配色組合。它會顯示每個配色組合的螢幕截圖，供您查看、通過和失敗。任何失敗的組合都會對 Lighthouse 分數造成負面影響。
這些結果可能會如下所示：
JS 控制台
也許目前為止列出的工具都不在您的身邊。或許您所在的位置 (一整天) 是 JavaScript。以下是可嘗試的實驗。您在建構時，控制台的「問題」窗格會持續回報任何色彩對比無障礙問題。請依序前往「設定」>「實驗」啟用這項功能，如下所示：
接著，請開啟「Issue」窗格，看看是否有任何發現。如果是，則會如下所示：
色盲模擬
在色彩對比及確保色彩配對方面是否容易使用時，建議您針對視覺障礙模擬工具指出這一點。這會變更設計的顏色或外觀，以展示不同類型的色盲症結果，讓您有機會修改設計，讓使用者體驗與使用者溝通時，不只使用顏色。
僅使用顏色來表示資訊 (例如紅色代表不良，綠色代表良好) 並非安全的無障礙設計做法。有些人對綠色或紅色的感知不盡相同，而這個模擬工具可讓您體驗並記住這一點。
色彩對比系統偏好設定模擬
越來越多使用者會在作業系統中變更對比設定，讓他們能夠在 UI 中要求更少或更多對比的個人化設定。CSS 可以使用這項設定，就像使用淺色或深色主題偏好設定一樣。Chrome 開發人員工具可模擬這項偏好設定，讓設計能夠測試並調整使用者要求，而無須從系統切換設定。
試用 WCAG 3.0 APCA
另一個實驗方法是使用實驗性的 APCA 色彩比率評分系統，測試您的配色組合。您可以透過「設定」>「實驗」啟用這項功能，系統會以更新且改良的對比度檢查器演算法取代 WCAG 2.1 比例系統，讓您在提案符合標準時預覽結果。
啟用後，請使用點選檢查提示或顏色挑選器查看配色分數，並確認是否通過：
結論
色彩對比是網路無障礙功能的重要環節，如果能遵循這項規則，就能讓網路在各種情況下更適合大多數使用者使用。希望這三個工具能讓您更有信心做出絕佳的色彩選擇。