2017年1月25日 星期三

產生排版所需的文字及背景顏色配色組合,符合 WCAG網頁內容無障礙規範


網站鏈結:

Colorable

[介紹]
Colorable 產生排版所需的文字及背景顏色配色組合,這些顏色不單純只有隨機顯示,而是真正符合 WCAG(Web Content Accessibility Guidelines,網頁內容無障礙指南)規範

使用者是否遭遇任何身體、心理或技術上的障礙,都不會影響接收網站所釋出的資訊。顏色方面依照色彩可讀性的演算法來計算,背景色和前景色亮度應該有一定數值的差異,充足的對比才能有一定的易讀性,也能使色盲者正常閱讀。

[功能]

  • 點選「Random」按鈕來隨機挑選一種顏色配色組合
  • 在不同的配色出現後,上方會有一個數值,後面會顯示 AA Large、AA 或 AAA,這應該就是「顏色對比檢查」功能計算出的數值,如果要通過 WCAG AA 或 WCAG AAA 的話數值要越高越好,越高也代表對比度越大、易讀性更強。
  • 想查看背景和前景(文字)顏色的瀏覽效果,將網頁拖曳到下方,會有一小段文字可以預覽。
  • 檢查你目前的網站配色有沒有符合 WCAG,只要將前景色、背景色色碼輸入 Colorable 就能計算出對比數值。

[使用方法]

有三個參數可以調整,包括顏色的色調(Hue)、飽和度(Saturation)和亮度(Lightness),當然你也能使用捲軸來調動數值高低,產生不同的顏色變化。


沒有留言:

張貼留言