無障礙網頁設計｜3個免費色彩對比度檢測工具

「工欲善其事，必先利其器。」要從0到有建立一個無障礙網站並不容易，因此有好的小工具幫忙，就可以幫我們很多忙。

無障礙網站規範中(Web Accessibility)，在色彩對比度(Color contrast)的部分，關係到的不只是背景顏色、文字顏色，文字大小也會影響，例如文字較大、對比度就較高。詳細的解說可參考w3.org的這篇文章(英文)。

這篇就會介紹：

無障礙網頁規範檢測工具

如果你的網站已經建立了，在讓它無障礙化之前，可以先知道有哪些需要改善的地方，就會有莫大的幫助！

WAVE這個工具快速又直覺，有多種方式可以做檢測，可以將你的網址直接貼上，或是安裝Chrome插件、或Firefox插件。

在檢測之後，就會出現向上方圖片類似的檢測結果，也會在你的網頁上面標註出相對應的位置，可以很直覺地用點擊來看有問題的部分。

而色彩對比度的檢測結果，便是在圖片中「Contrast Errors」的那個欄位，像是這邊就有48個色彩對比度錯誤。

Axe DevTools適合網站開發工程師使用，因為這個工具不只標注出了位置，並會顯示出該段程式碼的位置、詳細內容，以及該段程式碼應該如何做改善。

Axe DevTools的免費版是下載Chrome插件，並開啟Chrome的開發人員工具才看得到。在跑完檢測結果之後，色彩對比度會以「Elements must have sufficient color contrast」來顯示。

檢測完網站需要改善的色彩元件了，要怎麼找到適合的設計色彩搭配呢？

Geenes可以提供的是，讓你設計出一套符合無障礙網站規範的色彩設計系統。選擇你的主色之後，會依據這個主色產生共10種不同的色調，並以此顯示出哪些色調的搭配符合色彩對比限制。

當然也可以增加其他顏色做為主色，色調的數量、顏色都可以自由調整。而在左上角的兩個圓圈，可以點擊變換欲比較的顏色組合，也預設了最常用的黑、白兩色。

畫面左下角有個「Normal Vision」的選單，可切換成不同色盲模式來看效果，也是很方便的功能。

除此之外，左上角的畫面選單「Design」，會讓你即時預覽目前設定的色彩設計，套用到手機App或網站的lo-fi wireframe線稿的樣子。

色彩對比度的小工具還有很多，目前這個是我看到比較直覺使用，並可以一次產生出多種色彩搭配組合的工具。希望這篇文章對你有幫助囉！