続きを読む… »

と言うわけで公開レビュー版で出てきている内容は、W3Cが勧告したWeb Content Accessibility Guidelines（WCAG)2.0の内容と同じものになっております。各国で基準が異なるというのもおかしな話ですので、世界的な標準となるWCAG2.0に従ったというのは大変評価出来ることだと思います。

2004年版が「背景色と文字色で十分に明度差を付けなさい」とか「色だけで情報を区別せずに、文字情報と合わせて使いなさい」と言ったような、言ってみれば大雑把な指針が示されただけなのですが、今回の改訂で最も重要な部分として、きちんと数値化された達成基準が示されたことにあります。

文字コントラストの達成基準

今回の改訂では文字色の達成基準は文字コントラストによって示されています。では文字コントラストとは何かと言うことですが、以下の式で表されます。

コントラスト比 (L1 + 0.05) / (L2 + 0.05)

このL1は明るい方の色の相対輝度、L2は暗い方の相対輝度を表します。ではこの相対輝度はどのように計算されるかと言いますと、

相対輝度

L = 0.2126 * R + 0.7152 * G + 0.0722 * B

また新しいRGBという記号が出てきましたが、こちらについては、

• if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4
• if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4
• if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4

として定義されております。ついでにRsRGB、GsRGB、および BsRGB は

• RsRGB = R8bit/255
• GsRGB = G8bit/255
• BsRGB = B8bit/255

このような式で計算されます。この計算結果は1:1～21:1の間の値を取るのですが、この比が4.5:1を超えていれば達成基準AAをクリア、7:1を超えていれば達成基準AAAをクリアしていることになります。

また大きいサイズの文字（半角英数字なら18あるいは14ポイント以上の太字、日本語のフォントであれば22あるいは18ポイント以上の太字）の場合には、達成基準AAを満たすためには3:1、達成基準AAAを満たすためには4.5:1というように、フォントのサイズによっても基準は変わってきます。

とは言え、このような複雑な計算を毎回やってられませんので、インフォアクシアさんが提供されているカラー・コントラスト・アナライザー 2.2 日本語版を利用することにしましょう。

実際の配色とコントラスト比

では背景色が白い場合のコントラスト比を実際に見てみましょう。12ptと18ptの文字を用意しました。背景色は#FFFFFFの白、文字色は#000000の黒から#111111、#222222のように順に明るくしていきます。

12ポイントの方では白（＃FFFFFF)の背景色に対し、文字色#777777までなら達成基準AAを、#555555までなら達成基準AAAもクリアすることが出来ます。次に大きなフォントとされる18ポイントの方では、#888888までで達成基準AAを、#777777までで達成基準AAAをクリアすることが出来ます。

もちろんフォントの形状などによっては、見やすさは変わってきますので、「最低限」とされるAAではなく、「より十分」なAAAを目指していくのがよいでしょう。また、この基準をクリアしたからと言って、読みやすいとは限りません。特に加減ぎりぎりになってくると、色相などによっても読みにくく感じてしまうでしょう。

背景色が#FFFFFFの白の場合に限って言えば、背景色と文字色との差が小さいほど柔らかい印象に見えますが、私の個人の主観としては、柔らかさを表現するために文字色を#666666以上の明るさにする必要を感じません。もしそれが必要なのであれば、その他の部分の色で表現することが可能だからです。

今回のJISの改訂は「こうした方がよい」と言うものではなく、「こうあるべきである」と言うことを示したものです。Webや色彩のプロフェッショナルがまず範を示し、広く世の中に知らしめるようにしたいものです。

« 隠す

続きを読む… »

画面全体の点滅を避ける

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

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

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

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

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

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

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

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

« 隠す