Area Contrast Checker

什麼是 Area Contrast Checker？

Area Contrast Checker 是一款 Chrome 擴充功能，可透過拖曳選取頁面區域，檢查已渲染網頁內容的色彩對比。它不只依賴計算後的 CSS 值或手動吸管取色，而是從可見頁面取樣實際像素，估算前景與背景顏色。

這個工具是為無障礙審查而設計，適用於圖片、漸層、疊加層、canvas 內容與其他多層介面上的對比檢查。它會回報 WCAG 2.1/2.2 對比結果與 APCA 數值，當選取區域未達對比目標時，也會提供顏色建議。

主要功能

• 以區域為基礎的像素分析：使用者拖曳選取區域，擴充功能會取樣已渲染像素，從實際可見內容推斷前景與背景顏色。
• WCAG 2.1 與 2.2 檢查：依據成功準則 1.4.3 與 1.4.11 評估一般文字、大字與 UI 元件的對比。
• APCA 支援：顯示 APCA Lc 值，讓使用者可用與 WCAG 3.0 討論相關的方法評估對比。
• 保留色相的顏色建議：當對比不足時，擴充功能可建議在保留原始色相的同時提升對比的替代顏色。
• 多種色彩格式：可檢視與複製 HEX、RGB、HSL 與 OKLCH。
• 手動取色模式：當自動區域分析不足時，使用者可選取特定像素來微調結果。
• 頁面互動模式：在 Windows 按住 Alt 或在 Mac 按住 Option，可暫時恢復頁面互動，讓使用者在不離開檢查器的情況下點擊、懸停或瀏覽。
• Retina 與高 DPI 支援：取樣會考量裝置像素比，以提升高解析度螢幕上的精準度。

如何使用 Area Contrast Checker

1. 點擊擴充功能圖示以啟動檢查器。
2. 在想要檢查的頁面區域上拖曳選取。
3. 查看工具顯示的對比比率、WCAG 結果或 APCA 值。
4. 如有需要，可切換到手動取色模式，或以偏好的格式複製偵測到的顏色。

使用情境

• 用於行銷頁面或產品介面的無障礙稽核，特別是文字位於漸層、圖片或分層背景上的情況。
• 設計審查會議中，設計師需要確認選定的前景與背景組合是否符合 WCAG 目標。
• 檢查按鈕、標籤與其他需要針對相鄰背景驗證對比的 UI 元件。
• 用於 canvas 或插畫內容較多的頁面，因為基於 DOM 的對比工具可能無法反映實際渲染結果。
• 當設計需要一個在保留原始色相前提下、兼顧對比安全的替代色時，可快速進行顏色微調。

常見問題

• Area Contrast Checker 是分析頁面 DOM 還是已渲染畫面？它會分析所選區域中的已渲染像素，這有助於反映使用者實際看到的內容。
• 它支援 WCAG 和 APCA 嗎？支援。頁面說明包含 WCAG 2.1/2.2 檢查與 APCA Lc 值。
• 它能處理圖片和漸層嗎？產品描述明確指出，像素分析可可靠地用於圖片和漸層，也提到了疊加層、Canvas 元件與複雜視覺層。
• 我可以複製偵測到的顏色嗎？可以。擴充功能包含複製控制，並支援 HEX、RGB、HSL 與 OKLCH 格式。
• 這個工具能保證無障礙合規嗎？不能。來源說明顏色偵測是根據像素分布的估算，最終合規判定仍應另行驗證。

替代方案

• 吸管式取色器：可手動取樣特定顏色，對單一配對可能更精準，但重複檢查時較慢。
• 自動化無障礙掃描器：適合對整個頁面進行大範圍稽核，但在圖片、漸層及其他渲染效果上可能較吃力。
• 基於元素的對比檢查器：這類工具會讀取計算後的 HTML/CSS 值，適合簡單版面，但在涉及透明度或重疊圖層時，可能與最終螢幕渲染不一致。
• 搭配設計工具進行手動視覺檢視：設計師可在設計或繪圖工具中直接檢查顏色，但通常與即時網頁及無障礙標準的整合度較低。