隨著網頁無障礙設計的關注度不斷提升，我們透過提供無障礙設計診斷服務，持續開發「更簡單、更易懂」的診斷支援工具。
作為首個推出的成果，Chrome 擴充功能「Area Contrast Checker」正式發布。
開發背景
傳統的對比度檢測工具主要分為三種類型，各有優缺點。
- 自動掃描型
可以從整個頁面機械性地自動提取，效率很高，但當背景為圖片或漸層時，容易出現誤偵測或漏檢的問題。 - 取色器型（滴管）
可以精確測量所見的顏色，但需要逐一手動提取，導致工作成本龐大。 - 元素指定型
可直接參考 HTML/CSS 資訊，操作簡便，但無法檢測圖片，且在元素重疊或透明度等實際渲染狀態下，可能無法正確取得資料。
「有沒有辦法能簡單易用、精度高又能在任何地方都能偵測？」帶著這樣的現場需求，開發工作就此展開。
前所未有的第四種方案
Area Contrast Checker 採用的「區域分析」就是這個「答案」——第四種創新方法。
用滑鼠拖曳選取要檢查的區域。系統將自動偵測該區域內的像素，並識別背景色與前景色。由於目標是使用者實際看到的「顯示內容本身」，因此不受元素重疊影響，也可以檢查圖像。
只需拖曳感興趣的位置，即可輕鬆進行檢查。
主要功能
▪️WCAG 2.1 / 2.2 適配判定
根據成功標準 1.4.3、1.4.6、1.4.11，評估一般文字（AA: 4.5:1、AAA: 7:1）、大字體（AA: 3:1、AAA: 4.5:1）、UI 元件（AA: 3:1）的對比度。
▪️支援次世代標準 APCA
支援 WCAG 3.0 草案中探討的新對比基準「APCA（Accessible Perceptual Contrast Algorithm）」。即時顯示相容的字體大小範圍（Lc 值）。
▪️保持色調的顏色建議
當對比度不足時，在保持原始顏色色調（Hue）的情況下，建議符合標準的相近顏色。
▪️為專業人士提供的進階功能
・支援 HEX、RGB、HSL 等顏色格式。
・當需要微調自動偵測結果時，可使用拾色器按像素單位重新選擇。
・支援日語和英語兩種語言
Liberogic 致力於將無障礙設計從「特殊對應」轉變為「基本品質」。
我們在網頁製作和無障礙設計診斷的實務中，將「多希望有這樣的工具」的想法投入到本工具中。我們將持續開發工具，使無障礙設計更加親近、更加順暢。敬請期待後續版本。
