昨年の今頃、色のアクセシビリティ・チェックツールをいくつか紹介した。あれから JIS も改訂されて色のチェックするための基準も変わった。
の2つが新JISに対応していることは紹介済みなのだが、もうひとつ WCAG Contrast checker という Firefox のアドオンも色チェックの際には有効だ。
WCAG Contrast checker
アドオンを有効にすると、ステータスバーに色のパレットみたいなアイコンが常駐する。それをクリックするとサイドバーが展開される。
テキストを選ぶと、背景色と文字色の組み合わせを見て判定結果を表示してくれる。以下はText selectorで選んだ項目のチェック結果イメージ。
意外と見逃しがちな a:hover 時などの数値も取ってくれる。当ブログホームなどで使用しているhoverスタイルではレベルAAとレベルAAAに適合しない、という結果がわかる。
Firefoxさえあればすぐにチェックできるので、一番手軽なツールかもしれない。実装する人が使っていれば、作りながら手元で確認してデザインの見落としに気付くこともできる。入れておいて損はないアドオンだと思う。