這幾年我陸續介紹一些和設計及網頁開發相關的免費資源，其中很多人會用到的「配色工具」是我相當熱愛的題材，例如 Adobe Kuler 能尋找製作簡報設計的配色靈感，從 Coolors 簡單快速的選色器來找出各種顏色組合，若你完全沒有想法，BrandColors 收錄世界知名品牌顏色色碼也是個可以參考的方向，這些線上工具最棒的就是完全不用額外下載或安裝 App，只要打開瀏覽器就能使用。
本文要介紹的 Colorable 是另一款配色工具，不同於前面幾個找色碼工具，Colorable 產生排版所需的文字及背景顏色配色組合，這些顏色不單純只有隨機顯示，而是真正符合 WCAG（Web Content Accessibility Guidelines，網頁內容無障礙指南）規範。
什麼是 WCAG 呢？依照我的理解它又被稱為「網頁親和力」，也就是無論使用者是否遭遇任何身體、心理或技術上的障礙，都不會影響接收網站所釋出的資訊。顏色方面依照色彩可讀性的演算法來計算，背景色和前景色亮度應該有一定數值的差異，充足的對比才能有一定的易讀性，亦能使色盲者正常閱讀。
Colorable 產生的前景和背景配色組合就符合了 WCAG 對於色彩的建議。
網站名稱：Colorable
網站鏈結：https://colorable.jxnblk.com/
使用教學
STEP 1
開啟 Colorable 網站後，直接從下方調整顏色代碼，網頁會即時呈現，更快的方法是點選「Random」按鈕來隨機挑選一種顏色配色組合。
色碼下方有三個參數可以調整，包括顏色的色調（Hue）、飽和度（Saturation）和亮度（Lightness），當然你也能使用捲軸來調動數值高低，產生不同的顏色變化。
在不同的配色出現後，上方會有一個數值，後面會顯示 AA Large、AA 或 AAA，這應該就是「顏色對比檢查」功能計算出的數值，如果要通過 WCAG AA 或 WCAG AAA 的話數值要越高越好，越高也代表對比度越大、易讀性更強。
STEP 2
如果你想查看背景和前景（文字）顏色的瀏覽效果，將網頁拖曳到下方，會有一小段文字可以預覽。
最後把產生的顏色組合使用於你的網站 CSS 樣式表，就能將顏色套用到自己的網站，是不是很簡單呢？當然 Colorable 還有另一個用法，用來檢查你目前的網站配色有沒有符合 WCAG，例如免費資源網路社群目前的背景色為 #eee、前景色是 #333，只要將色碼輸入 Colorable 就能計算出對比數值。
其他網頁排版顏色工具推薦：