色覚特性に配慮したWebデザインのためのツール
火曜日, 9月 30th, 2008みなさまこんにちは、加賀田です。本日も前回に続いて便利ツールのご紹介です。
Webデザインの作業にあたって、配慮すべき項目のひとつに色とアクセシビリティの関係があります。情報を認識しやすい色使いを心がけるのはもちろん重要であって、世のデザイナーさんは(Webに限らず)常に自分の目でそれを確認していることと思います。
それに加えて、色覚に障害を持ったユーザにも使いやすい配色を行う必要があります。このあたりは、一般のプロジェクトではあいまいにされがちな部分ではあります。が、こういったことにも気を配っておくと 色覚特性ばかりでなく、例えば「ディスプレイが壊れて色の表示がいつもと違う!」なんていうハードウェアの問題などにも対応できるなど、結果すべてのユーザや閲覧環境に対してアクセシビリティの向上を図ることができます。「色覚障害なんてマイノリティでしょ?」と、あなどるなかれ。
とはいえ、他人の色の感じかたを推し量るのは難しいことで、色のアクセシビリティ評価にはそれなりの指標やツールを使う必要があります。指標としては、W3Cの手になるアクセシビリティガイドラインであるWCAG1.0に”Guideline 2. Don’t rely on color alone.”という項目があります。また、”Techniques For Accessibility Evaluation And Repair Tools“という文書もワーキングドラフトながら公開されており、RGB値からアクセシビリティを定量的に評価する手法などが紹介されているようです。
これらの指標を元に、アクセシビリティを評価するための便利ツールがたくさん出回っております。わたしの業務用マシンにインストールしているのは、「カラー・コントラスト・アナライザー」と「ColorDoctor」のふたつ。
「カラー・コントラスト・アナライザー」は、先述のW3Cによるコントラスト比や色差の評価基準から前景色と背景色の組み合わせが適切かどうかを確認できるツールです。

当ブログのリンクテキストのコントラスト比を確認するとこんなかんじ。
そして「ColorDoctor」は、Webページの色調を色覚特性に合わせてシミュレーションできるソフトです。

弊社Webサイトのトップページを使って、赤色が見えにくい色覚特性(正式には1型色覚というそうです)をシミュレートしてみました。全体に色合いが不明瞭に見えることが分かります。まだ文字は判読できるレベルですが、配色によっては文字が読めなくなることもあるでしょう。
ほかにもいろいろ、有料無料含めいいツールが出回っているようです。すてきですね。みなさまも一度おためしあれ。


