Colorable 網頁色彩線上產生器,可產生符合 WCAG 規範配色組合
這幾年我陸續介紹一些和設計及網頁開發相關的免費資源,其中很多人會用到的「配色工具」是我相當熱愛的題材,例如 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 就能計算出對比數值。
其他網頁排版顏色工具推薦: