蠍は留守です考

蠍の輪郭を見つめてふける思惟の痕跡

20170509013806

色のアクセシビリティ・チェックツール WCAG Contrast checker

昨年の今頃、色のアクセシビリティ・チェックツールをいくつか紹介した。あれから JIS も改訂されて色のチェックするための基準も変わった。

の2つが新JISに対応していることは紹介済みなのだが、もうひとつ WCAG Contrast checker という Firefox のアドオンも色チェックの際には有効だ。

WCAG Contrast checker

アドオンを有効にすると、ステータスバーに色のパレットみたいなアイコンが常駐する。それをクリックするとサイドバーが展開される。

テキストを選ぶと、背景色と文字色の組み合わせを見て判定結果を表示してくれる。以下はText selectorで選んだ項目のチェック結果イメージ。

ColorChcker チェック結果

意外と見逃しがちな a:hover 時などの数値も取ってくれる。当ブログホームなどで使用しているhoverスタイルではレベルAAとレベルAAAに適合しない、という結果がわかる。

a:hover 時の ColorChecker チェック結果

Firefoxさえあればすぐにチェックできるので、一番手軽なツールかもしれない。実装する人が使っていれば、作りながら手元で確認してデザインの見落としに気付くこともできる。入れておいて損はないアドオンだと思う。


参考URL

Copyright © Hitoyam.