こんにちは、今日のおやつは二度づけえびみりん焼だったHitoyamです。

さて、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、であり、特性によってすこしずつ見え方が違うのが分かります。

• 

• 

• 

• 

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

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

• 

• 

• 

• 

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

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

• 

• 

• 

• 

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

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

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

• 

• 

• 

• 

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

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

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