蠍は留守です考

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

20170509013806

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

2月はアクセシビリティ強化月間につき、カラーチェックツールについてまとめている。

まずはシリーズ第1弾(そんな大袈裟なものではないが)、カラー・コントラスト・アナライザーの紹介。

カラー・コントラスト・アナライザー Colour Contrast Analyser

カラー・コントラスト・アナライザーは、クリエイティブ・コモンズのライセンスで提供されるツール。日本語版は株式会社インフォアクシアさんから詳細を見ることができる。

W3C勧告の「Web Content Accessibility Guidelines (WCAG) 2.0」の達成基準を満たしているかどうかを判定することができ、色覚特性ごとの見え方シミュレーションもできる。

WCAG 2.0 Conformance Requirements(適合要件に関する項目)でいうところの「適合レベル」ごとに結果を返してくれるところがポイントで、これによってサイトの適合宣言に応じた対応が可能になる。WCAG 2.0の達成基準を満たせるということは、改訂後の新JISにも適合できるということ。

数値による結果表示

例えば白い背景 #ffffff; (R:255,G:255,B:255) に濃いグレーの文字 #333333; (R:51,G:51,B:51) を乗せた時、色差612/明度差204/コントラスト比12.6対1、という結果が出る。

加えて、色覚特性ごとの見え方も数値で表すことができる。第一色覚特性の場合には色差614/明度差205/コントラスト比12.7対1、第二色覚特性の場合には色差614/明度差204/コントラスト比12.6対1、第三色覚特性の場合には色差610/明度差204/コントラスト比12.7対1、であり、特性によってすこしずつ見え方が違うのが分かる。

色差・明度差:Hex#333の詳細、色差・明度差:Hex#333の色覚特性ごとの結果、コントラスト比:Hex#333の詳細、コントラスト比:Hex#333の色覚特性ごとの結果

次に白い背景 #ffffff; (R:255,G:255,B:255) に薄いグレーの文字 #cccccc; (R:204,G:204,B:204) を乗せた時、色差153/明度差51/コントラスト比1.6対1、という結果になる。表示中のアイコンがバツになっており、色差が不足している旨のメッセージも出る。

このぐらい薄いグレーであれば、見た感じで読みにくさを理解することができると思うが、判定結果には基準値も添えられているので、どのぐらい足りていないかを具体的かつ客観的な数値で知ることができる。

色差・明度差:Hex#cccの詳細、色差・明度差:Hex#cccの色覚特性ごとの結果、コントラスト比:Hex#cccの詳細、コントラスト比:Hex#cccの色覚特性ごとの結果

では、白い背景 #ffffff; (R:255,G:255,B:255) にグレーの文字 #666666; (R:102,G:102,B:102) を乗せた時はどうだろうか。色差459/明度差153/コントラスト比5.7対1、という結果になった。

実は、このぐらいの微妙な色合いでは、適合基準によってOKだったりNGだったりするケースが多く、気を付けたいところ。また、色と文字サイズの組み合わせにも依存する。

色差・明度差:Hex#666の詳細、色差・明度差:Hex#666の色覚特性ごとの結果、コントラスト比:Hex#666の詳細、コントラスト比:Hex#666の色覚特性ごとの結果

レベルAA基準では4.5対1以上で適合となるのだが、レベルAAAの基準では7対1以上ないと適合とならないため(1.4.3 Contrast (Minimum) と 1.4.6 Contrast (Enhanced) 参照)、デザイナーはサイトの適合宣言に応じた確認をしながら作業を進める必要が出てくる。

色覚特性ごとの見え方シミュレーション

数値だけでなく、各色覚特性の方々の見え方をシミュレートして視覚的に再現してくれる機能もある。

第一色覚での見え方シミュレーション、第二色覚での見え方シミュレーション、第三色覚での見え方シミュレーション、グレースケールでの見え方シミュレーション

カラー・コントラスト・アナライザーはデザイナーにとって心強い味方

カラー・コントラスト・アナライザーは数値や各レベルへの対応状況を合わせて表示してくれるので、デザイナーにとって心強い味方になってくれる。特に色彩に関する部分はマークアップに入る前のビジュアルデザインで決定されてしまうので、ビジュアル部分を担う際には積極的に取り入れたい。

WCAG 2.0及び改訂後の新JISに完全対応かつ日本語版のカラーチェックツールは、私がこのエントリを書いている時点ではカラー・コントラスト・アナライザーしかなさそう。もし何か他にあったら教えていただければと思う。


参考URL

Copyright © Hitoyam.