続きを読む… »

視覚に障害がある場合、色だけで情報を区別していては、その理解を妨げることもあります。

左側のグラフが悪い方の例になります。色だけで情報を区別しておりますので、その色自体の区別が付かなければ、A社が実際にどこの領域に対応しているのかがわからないということになります。

対して、右側は引き出し線を付けることによって、領域と文字が１対１で対応しますので、どのような方にもわかりやすいということになります。

これはグラフの表示に留まらず、ボタンなど操作が必要な部位には特に重要になってきますので、特に気を付けるようにしましょう。

模様の併用

また色だけに頼らず、模様を併用する場合にも注意が必要です。色彩と模様のみで区別しようとすると、左側の例の黄色のように明度の高い色は模様が見分けにくくなります。

また水色の部分のように、特に面積の小さなところでも模様がわからないことがありますので、どのような状況であれ、文字の情報を領域と一致して表示するような工夫が必要です。

« 隠す

続きを読む… »

視認性・可読性と明度差

JISX8341-3 5.5.cに対応する部分で、視覚特性によっては背景色と文字色の関係から読みにくい組み合わせが存在することが指摘されています。

文字の見えやすさを視認性、読みやすさを可読性と言いますが、これは主に背景色と文字色の明度差に依存します。色覚障害の場合や加齢による場合など様々な条件が考えられますが、適切な視認性・可読性を確保するには、一般的には中央のサンプルのように明度差を大きく取るようにします。弱視の方などでOSのハイコントラスト機能を使って画面を閲覧する場合でも明度差がないと文字の判別がしにくくなります。

また画像などの場合には、明度差の大きな色で文字を縁取りしてやることによって、読みやすくなることがあります。

WCAG2.0によるコントラスト比を使った色差計算

ウェブの様々な規格を制定するW3C（World Wide Web Consortium）のアクセシビリティ・ガイドラインであるWCAG2.0では、コントラスト比を用いた計算方法が推奨されています。

計算方法は難しくないのですが、株式会社インフォアクシアが簡単にチェックできるツール「カラー・コントラスト・アナライザー」を公開しておりますので、それを利用するとよいでしょう。

以前提案されていた明度差と色差に基づく基準値

W3Cの「Techniques
For Accessibility Evaluation And Repair Tools」の中で読みやすさの計算式の試案が提示されております。下記のものがそれにあたります。

明度差の計算式

1. 文字、背景それぞれの色のRGB値を0～255の10進数で表し、それぞれR, G, Bとする
2. 文字色、背景色の明るさを計算式 ((R x 299) + (G x 587) + (B x 114)) / 1000 で計算する
3. 明度差が 125以上あれば、まず読みやすいと考えてよい

色差の計算式

1. 文字、背景それぞれの色のRGB値を0～255の10進数で表し、数値の大きい方と小さい方をそれぞれmaxR、minRのようにする
2. 色の差を計算式 (maxR – minR) + (maxG – minG) + (maxB – minB) で計算する
3. 色差が 500 以上あれば、まず読みやすいと考えてよい
   

実際に計算を行うのは非常に大変なことですが、既出のカラーコントラストチェッカーや富士通から提供されているColorSelectorを用いれば、計算することなく視認性・可読性を確保することが出来ます。どなたにも使いやすいサイトの第一歩としてお使いになられることを推奨いたします。

追記：Web JIS（JIS X8341-3:2009）の改訂版では、WCAG2.0のコントラスト比が読みやすさの達成基準としてそのまま採用されております。そちらについては「JIS X8341-3:2009における文字コントラストの達成基準」のページで詳しく記述しておりますので、そちらを参照してください。

« 隠す

続きを読む… »

画面全体の点滅を避ける

1997年に起きたいわゆる「ポケモン事件」で番組を見ていた子供達が次々と病院へ運ばれたのを覚えておられる方も多いと思います。赤と青の光が交互に点滅したことが原因と言われております。

このような症状は光過敏性てんかんなどと言われており、点滅が１秒間に15回～20回の時に症状を発しやすいと言われております。また赤と青の点滅で特に起こりやすいというようなことも報告されております。

以前はJavascriptなどを用いた画面の点滅などが使われたウェブサイトを多く見かけました。最近では見かけなくなりましたが、使用しないように注意しましょう。

バナーなどでのアニメーション

アニメーションGIFなどの画像の切り替えは今でも良く見受けますが、これも切り替わる前と後の色相・明度・彩度の変化を極力抑えるように気を付けます。

早い周期での大きな変化は目に負担が掛かるばかりでなく、そこに載せられた情報の認識もしにくくなりますので、注意しましょう。

重要な情報をこのようなアニメーションの中に組み込むと、閲覧者が目を凝らしてアニメーションを見なければならないため、光過敏性てんかん以外にも気分が悪くなったりの諸症状を引き起こす可能性があります。このようなことを考えて重要な情報を早い周期の点滅の中に組み込むことは避けるべきでしょう。

JIS規格では「1秒間に2回以上の点滅を行わない」「彩度の高い赤での点滅、コントラストの強い画面の反転を避ける」のように例示されていますが、実際は1秒に1回の点滅でもかなりせわしなく感じることがあります。右に掲載したサンプルは3秒に1回の点滅です。

« 隠す