色彩工具 ❘ Colorable
- 2019.07.10
- / 468 Views
本文要介紹的 Colorable 是另一款配色工具，不同於前面幾個找色碼工具，
Colorable 產生排版所需的文字及背景顏色配色組合，這些顏色不單純只有隨機顯示，
而是真正符合 WCAG（Web Content Accessibility Guidelines，網頁內容無障礙指南）規範。
什麼是 WCAG 呢？又被稱為「網頁親和力」，
也就是無論使用者是否遭遇任何身體、心理或技術上的障礙，都不會影響接收網站所釋出的資訊。
顏色方面依照色彩可讀性的演算法來計算，背景色和前景色亮度應該有一定數值的差異，
充足的對比才能有一定的易讀性，亦能使色盲者正常閱讀。
而 Colorable 產生的前景和背景配色組合就符合了 WCAG 對於色彩的建議。
值得一試的理由：1.操作簡單易懂。
2.提供網頁易讀性的比對，在網頁設計上有很大的幫助。
▋ 如 何 操 作 How to use
色碼下方有三個參數可以調整，
包括顏色的色調（Hue）、飽和度（Saturation）和亮度（Lightness），
當然你也能使用捲軸來調動數值高低，產生不同的顏色變化。
在不同的配色出現後，上方會有一個數值，後面會顯示 AA Large、AA 或 AAA，
這應該就是「顏色對比檢查」功能計算出的數值，
如果要通過 WCAG AA 或 WCAG AAA 的話數值要越高越好，越高也代表對比度越大、易讀性更強。
最後把產生的顏色組合使用於你的網站 CSS 樣式表，就能將顏色套用到自己的網站，是不是很簡單呢？
當然 Colorable 還有另一個用法，用來檢查你目前的網站配色有沒有符合 WCAG，
輸入你的色碼就能計算出對比數值。
▋ 開 始 玩 色 彩
Colorable 網址．http://bit.ly/2HnMWn4