<style>
.blue {
color: blue;
}
.red{
color: red;
}
</style>

###### tags: `無障礙`

# 網站無障礙檢測協助工具
p.s.：以下⭐為推薦
## 🔰網站工具

### ⚙️W3C檢測－
[W3C Unicorn <i class="fa fa-external-link"></i>](https://validator.w3.org/unicorn/)(繁體中文-(X)HTML、CSS、RSS、HTTP Header等)
> 介紹文章：[您的網站真的符合規範嗎？](https://magiclen.org/w3c-validate/)

### 🎨顏色檢測－
[WebAIM <i class="fa fa-external-link"></i>](https://webaim.org/resources/contrastchecker/)
> 介紹文章：[色彩學：高可讀性配色對比度檢查，杜絕門牌顏色之亂](https://www.vedfolnir.com/web-accessibility-color-contrast-checker-32732.html)

[ContrastRatio <i class="fa fa-external-link"></i>](https://contrast-ratio.com/)
> 介紹文章：[無障礙網路空間服務網-色彩對比度怎麼看？](https://accessibility.ncc.gov.tw/Questions/Detail/3261?Category=19)

[HexNaw <i class="fa fa-external-link"></i>](https://hexnaw.com/)
> 介紹文章：[Hex Naw 檢測你的網站配色對比和可視性評分...](https://free.com.tw/hex-naw/)

[Who Can Use <i class="fa fa-external-link"></i>](https://whocanuse.com/)
> 介紹文章：[Who Can Use 檢查網頁配色對視力障礙使用者友善程度](https://free.com.tw/whocanuse/)

[Colorable <i class="fa fa-external-link"></i>](https://colorable.jxnblk.com/)
> 介紹文章：[Colorable 網頁色彩線上產生器，可產生符合 WCAG 規範配色組合](https://free.com.tw/colorable/)

[Color.review <i class="fa fa-external-link"></i>](https://color.review/)
> 輸入你的顏色，Color.review會直接在色彩選取器裡面顯示出幾個常用對比度規範的分界線（3:1, 4.5:1, 7:1），幫助你很直觀地挑選配色。

[Accessible color palette builder <i class="fa fa-external-link"></i>](https://toolness.github.io/accessible-color-matrix/)
> 輸入你的所有項目顏色，這個工具就能告訴你有哪些搭配是符合標準的，所有可以使用的配色一目了然。

[Data Color Picker <i class="fa fa-external-link"></i>](https://learnui.design/tools/data-color-picker.html)
> 數據可視化配色工具，給出兩端的顏色可以生成等距的中間色，方便辯識，而且默認的配色方案也是色盲友善的。

[Tanaguru Contrast-Finder <i class="fa fa-external-link"></i>](https://contrast-finder.tanaguru.com/)
> 若測試的2個顏色對比度不達標，會自動推薦一系列達標的顏色可供選擇。

[Randoma11y <i class="fa fa-external-link"></i>](https://randoma11y.com/)
> 會隨機生成一對符合對比度標準的色彩搭配，並且都是非常大膽時髦的顏色，拿來給ppt / 海報 / banner / logo 之類的小項目找靈感也都相當好用

[Color - Cloudflare Design <i class="fa fa-external-link"></i>](https://color.cloudflare.design/)
> 這個工具可以讓你上傳一張照片、或者輸入一個網址，自動提取顏色、生成幾套符合無障礙標準的UI配色方案，也是找配色靈感的神器

⭐ [ColorTool <i class="fa fa-external-link"></i>](https://material.io/resources/color)
> Google 的配色工具，可直接檢測顏色的accessibility。

[colorSafe <i class="fa fa-external-link"></i>](http://colorsafe.co/)
> 在定色板之前，可以用它來事先選擇符合標準的顏色。

[EightShapes Contrast Grid <i class="fa fa-external-link"></i>](https://contrast-grid.eightshapes.com/?version=1.1.0&background-colors=&foreground-colors=%23FFFFFF%2C%20White%0D%0A%23F2F2F2%0D%0A%23DDDDDD%0D%0A%23CCCCCC%0D%0A%23888888%0D%0A%23404040%2C%20Charcoal%0D%0A%23000000%2C%20Black%0D%0A%232F78C5%2C%20Effective%20on%20Extremes%0D%0A%230F60B6%2C%20Effective%20on%20Lights%0D%0A%23398EEA%2C%20Ineffective%0D%0A&es-color-form__tile-size=compact&es-color-form__show-contrast=aaa&es-color-form__show-contrast=aa&es-color-form__show-contrast=aa18&es-color-form__show-contrast=dnp)
> 能夠輕鬆輸入一系列十六進制代碼、命名它們並對比每種組合（甚至前景和背景的不同顏色）

## 🔰書籤檢測工具
[眾多書籤檢測工具 <i class="fa fa-external-link"></i>](https://www.pauljadam.com/bookmarklets.html)
> 安裝方式：將Install Link項目下的連結拖曳到瀏覽器書籤列中
> 執行方式：在目前網頁點選所需的書籤工具檢視網頁設計
> 常用-
> 🏷️按鈕44x44檢測-[安裝網頁 <i class="fa fa-external-link"></i>](https://adrianroselli.com/2019/06/target-size-and-2-5-5.html)
> 🏷️表單註解檢測-[安裝網頁 <i class="fa fa-external-link"></i>](https://www.ssa.gov/accessibility/andi/help/install.html)
> 🏷️文字間距檢測-[安裝網頁 <i class="fa fa-external-link"></i>](https://html5accessibility.com/tests/tsbookmarklet.html)
> 🏷️表格註解檢測-[安裝網頁 <i class="fa fa-external-link"></i>](https://pauljadam.com/bookmarklets/tables.html)
> 🏷️圖片註解檢測-[安裝網頁 <i class="fa fa-external-link"></i>](https://pauljadam.com/bookmarklets/images.html)

## 🔰瀏覽器套件

### ⚙️全網頁檢測－
[WAVE檢測工具 <i class="fa fa-external-link"></i>](https://wave.webaim.org/extension/) (⭐檢視h1-h6巢狀結構方便找)
> 可進行單頁線上檢測，或下載插件版使用。只要輸入要檢測的頁面網址，則會直接將該頁的檢測結果呈現於清單中，並列出不符合規範標準的各項內容。

[Web Developer檢測工具 <i class="fa fa-external-link"></i>](https://chrispederick.com/work/web-developer/)
> 英文版的網頁插件，以瀏覽器擴充套件的方式安裝，安裝後可依照要檢視的項目選取該功能，如選擇檢視圖片、title屬性或其他各項網頁元素/標記，結果會顯示在網頁上，方便直接檢視。
>
### ⚙️標題層級檢測－
Heading map工具[Chrome <i class="fa fa-external-link"></i>](https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi) [FireFox <i class="fa fa-external-link"></i>](https://addons.mozilla.org/zh-TW/firefox/addon/headingsmap/)
> 執行後即在瀏覽器左側開啟視窗，以列表方式依序列出網頁的標題層級(headings)，幫助使用者快速檢視標題層級的配置是否符合規範標準。(但不好用)

### 🎨顏色檢測－
WCAG-Contrast-Checker色彩檢測工具 [Chrome <i class="fa fa-external-link"></i>](https://addons.mozilla.org/en-US/firefox/addon/wcag-contrast-checker/) [FireFox <i class="fa fa-external-link"></i>](https://chrome.google.com/webstore/detail/wcag-color-contrast-check/plnahcmalebffmaghcpcmpaciebdhgdf/related)
> 用來檢查網頁文字及背景色彩的色彩對比值，並判斷是否符合規範標準。
> 可依據CSS樣式表指定的色彩自動比對，Chrome瀏覽器使用者則可使用滴管功能手動選取色彩進行比對。

## 🔰軟體

### 👁️色盲模擬器-
[Color Oracle <i class="fa fa-external-link"></i>](https://colororacle.org/)
> 非常好用的色盲模擬器，支持Mac / Win / Linux。大約8%的男人和0.5%的女人有色盲或色弱、是相當大的族群。當然，UI中不應該只通過顏色來區分信息，但有時無論如何會用到色彩區分（比如數據可視化），那麼就一定要使用色盲友善的配色方案。一般來講，藍/黃、藍/橙是比較萬用的搭配。

### 🎨顏色檢測－
⭐[Colour Contrast Analyser (CCA) <i class="fa fa-external-link"></i>](https://www.tpgi.com/color-contrast-checker/)
> 使用滴管功能選取網頁文字及背景色彩，即可立即換算出色彩對比值，並判斷是否符合規範標準。(吸色及色碼轉換方便)

## 🔰UI軟體套件(Figma為主)
[Stark（Figma, Sketch, Adobe XD）<i class="fa fa-external-link"></i>](https://www.getstark.co)

> 在設計軟件裡選中兩個圖層就能計算出色彩對比度、告訴你是否負責無障礙標準。
> 不達標的時候，它還會推薦最接近當前顏色並且符合標準的色彩建議、一鍵替換，非常方便（一鍵替換這個功能只能免費用3次，之後需要付費訂閱）。

[Figma: Find and Replace Colors <i class="fa fa-external-link"></i>](https://www.figma.com/community/plugin/806266638862897503/Find-and-Replace-Colors)
> 如果在設計途中發現一直使用的某個顏色不符合標準，那麼你可以用這兩個插件批量替換顏色，節省大量逐一修改的時間。

[Able (Figma, 色彩對比度插件) <i class="fa fa-external-link"></i>](https://www.figma.com/community/plugin/734693888346260052/Able-%E2%80%93-Friction-free-accessibility)
> 
> 打開Able，可以自動比較你選擇的兩個圖層之間的色彩對比度。此外也會同步顯示不同狀態的樣貌(如字體大小、粗細)，供用戶參考比較。

[Color Contrast Checker <i class="fa fa-external-link"></i>](https://www.figma.com/community/plugin/733159460536249875/A11y---Color-Contrast-Checker)
用來檢查設計稿內文字對比度是否遵守 WCAG（Web Content Accessibility Guidelines）標準，以保證使用者可以無障礙閱讀文字內容。Color Contrast Checker 的使用非常方便，喚起外掛，選中需要檢測的介面，點選 「Check」即可。

不過這款外掛也存在偶爾失效的問題，筆者還沒發現其規律和玄學。色彩對比度檢測的外掛除此之外還有三款，其中 Contrast 是筆者體驗下來比較不錯的一款，如果沒有對整個頁面內所有文字自動檢測的需求，Contrast 會更適合使用。

[Focus Orderer <i class="fa fa-external-link"></i>](https://www.figma.com/community/plugin/731310036968334777/A11y---Focus-Orderer)
Focus Orderer 幫助設計師標記並測試焦點狀態（Focused）的流程和體驗是否合理，一般在網頁設計中使用。

其實筆者之前還未見過類似 Focus Order 的外掛或工具，希望未來能有更多解決或輔助無障礙設計的工具出現。一方面讓我們的設計產出更容易向無障礙標準對齊，另一方面也會影響行業內的設計師更多的關注無障礙設計領域。

[Color Blind <i class="fa fa-external-link"></i>](https://www.figma.com/community/plugin/733343906244951586/Color-Blind)
上面提到的 Color Contrast Checker 可以檢測文字的對比度，而 Color Blind 則可以將設計稿自動轉成 8 種不同型別的色盲效果，藉此我們可以進入色盲使用者的視角審視我們的設計是否合理。

## 備註：政府無障礙網站官方文章
[無障礙網路空間服務網-網站無障礙檢測協助工具介紹<i class="fa fa-external-link"></i>](https://accessibility.ncc.gov.tw/Questions/Detail/4353?Category=19)
[無障礙網路空間服務網-色彩對比度怎麼看？<i class="fa fa-external-link"></i>](https://accessibility.ncc.gov.tw/Questions/Detail/3261?Category=19)