続きを読む… »

と言うわけで公開レビュー版で出てきている内容は、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や色彩のプロフェッショナルがまず範を示し、広く世の中に知らしめるようにしたいものです。

« 隠す

続きを読む… »

全ての人のために読みやすくする

基本的には背景色を使うことと文字の色を変えるのは見出しなど特別な場合を除いては変えることはお勧めしません。これは文字が読みにくいことで来訪者が帰ってしまうことを防ぐと共に、誰にでも使いやすいホームページを目指すことでビジネスの機会損失を減らすことも目的としております。

色覚障害者、白内障の方への配慮

色覚障害者は日本人男性の5%、女性では0.2%と言われ300万人以上の方が程度の差はあれ、色覚に障害を持っていると言われております。また白内障については60歳代では70%以上で水晶体の白濁が見られるそうです。

合計すると1000万人を軽く超えることは明らかで、今後高齢化社会が進行するにあたっては、文字の読みやすさは考慮されてしかるべき問題となっております。

このような状況も踏まえ、文字色を決定する際には富士通が提供しているColorSelectorやアイ・クリエイツの提供しているカラーコントラストチェッカーなどを使いチェックすることが望ましいでしょう。

« 隠す

続きを読む… »

視認性・可読性と明度差

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における文字コントラストの達成基準」のページで詳しく記述しておりますので、そちらを参照してください。

« 隠す

続きを読む… »

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

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

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

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

模様の併用

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

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

« 隠す