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


網站鏈結:
Colorable

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

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

[功能]

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

[使用方法]

點選「Random」按鈕來隨機挑選一種顏色配色組合。或可以調整三個參數,包括顏色的色調(Hue)、飽和度(Saturation)和亮度(Lightness),當然你也能使用捲軸來調動數值高低,產生不同的顏色變化。

dd712602731facce99367cd1eb3c3fc1b221112b.png?u=1345925

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google photo

您的留言將使用 Google 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s