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


網站鏈結:
Colorable

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

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

[功能]

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

[使用方法]

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

dd712602731facce99367cd1eb3c3fc1b221112b.png?u=1345925

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s