文字の読みやすさに関する調査

背景色と文字色の組み合わせで、読みやすいか読みにくいかを選んでいくだけの簡単なものなのですが、設問が多いため、自分で作っておきながら大変面倒くさいものとなっております。お忙しい中恐縮ですが、データを多く集めたいと考えておりますので、Web業界の方だけでなく、様々な方のご協力をお願いできればと思います。

なお、集まったデータを元にあれこれ考察をし、当サイトにて公開いたします。

アンケートは4月30日（金）までとさせていただきます。お忙しい方はTwitterでこんなアンケートがあるとつぶやいていただくだけでも構いませんので、どうぞよろしくお願いいたします。関連記事：

• フォントの形とサイズ
• 情報を見せる背景色
• カラーコーディネーターの選び方
• 配色に必要な情報
• 明度とは

今年（2010年）に改訂されるとされるWeb JIS（JIS X8341-3:2009）の公開レビュー版を読みましたので、文字色について少し書いてみようと思います。正式版ではどうなるやらわかりませんが、大きく変わることもないでしょう。

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

• 視認性・可読性の確保
• Webの配色に関する調査のご協力お願いします
• 明度だけを変えてサブカラーを作る
• 背景色と文字色
• フォントの形とサイズ

色のサイズとコントラスト

図は同じ2色の組み合わせを高さを変えて並べてみた例です。左から30ピクセル、10ピクセル、5ピクセル、2ピクセル、1ピクセルとなっています。理屈の上では、2色の差は変わらないのですが、右に行くほど2色の境界線はわかりにくくなっていきます。この現象は2色の彩度が低いほど顕著になります。2色の物理的な性質は左から右まで変わらないので、見え方の違いは見る側の人間の脳の働きによるものなのです。

この見え方が問題になってくるのは、主に細い文字による表現においてです。表示するフォントのサイズにもよりますが、通常のテキスト部分で使われるサイズだと文字の線は太さが1ピクセルであることが多いでしょう。その際に強調やリンクなどの色を変えたときに、思ったほど色の差がないという場合が多いのです。単なる強調である場合には、文字は読めるわけなので、読み進める上での問題はないのですが、これが下線を取り外したリンクである場合には、クリックされないと困るような事態も生じます。そこで、下のように強調する方の色の彩度や明度を調整して、より目立たせるようにしなければなりません。

閲覧環境によっても、同じ色が様々な見え方になったりします。色の差で何か情報を伝えたいような場合には、あまり細いラインなどは使わないようにした方が無難でしょう。文字色ではなく、背景色を使って強調するのも、情報を区別する良い方法です。関連記事：

• フォントの形とサイズ
• 固定レイアウトの背景色
• アクセントカラーの分割
• 悩んだら色を減らす
• 目の動きを考える

レイアウトを先にする理由

これまでは色彩設計を説明するため、便宜上いろいろなサンプルをお見せしてきましたが、皆さんが作っているウェブサイトとはアピールしたいこともメニューの数も違うはずです。

しかしこんな感じにしたいというレイアウトや他のウェブサイトを見て気に入ったデザインなどもあるはずです。またシンプルでものすごくわかりやすいブログのような文章を読ませることを中心としたデザインもあります。

カラーのイメージを中心にアピールするのであれば、それぞれの色を大きな面積に用いることになるでしょうし、テキストを重視するのであれば全体の面積を減らして、白い背景色を中心とした配色になるでしょう。

まずは表示する情報を手書きでもよいので、大雑把に決めてみましょう。重要なことはレイアウトしながら配色していくのではなく、レイアウトをしてから配色すると言うことです。言うまでもないことですが、レイアウトが決まらなければ面積比を考えようがないからです。

重要な部分や見せたい部分を考える

あとは読ませたい部分が読みやすいか、自分の伝えたいイメージが伝えられているかを考えながら配色していきます。行き詰まってしまった時は引き算を上手にしてやれば、混乱することもないでしょう。

関連記事：

• 固定レイアウトの背景色
• Webプロフェッショナルのための黄金則 Web配色デザインのセオリー
• 悩んだら色を減らす
• センスに頼らない配色とは
• 効果的に伝えるWeb配色標準デザインガイド

印象を壊さない背景色で

ブラウザウインドウのサイズによって、幅が可変して最大幅が変わるようなデザインであればあまり問題はないのですが、固定レイアウトの場合、800×600ピクセルに対応して作られたデザインはもっと広い画面で見れば大きく隙間が出来てしまう場合があります。

この部分についつい色を使いたくなってしまいますが、使う場合でもほぼ白に近い色を彩度が低く、明るい色を使うようにしましょう。空いている面積がかなり大きいのでベースカラーなどを用いるとくどい印象になってしまいます。

この例ではベースカラーがHSB[270:15:90]、サブカラーにもHSB[270:5:90]と色相が270で統一感が出来ておりますので、背景の色として色相は近い物を選び、同じような低彩度、高明度のHSB[305:5:90]を用いました。読みやすさを重視するために本文が入る部分の背景には色を付けておりません。

背景に色を使うことで、色の印象は強くなるのですが、無理に背景色を付けて、違和感を感じるようであれば、白背景のままにしておくのも選択肢の一つでしょう。必要ないと判断された場合には背景色を使う必要はないのです。

関連記事：

• レイアウトをしてから配色
• カラーイメージを見せる背景色
• 画像を見せる背景色
• 背景色と文字色
• 効果的に伝えるWeb配色標準デザインガイド

リンク色と操作性

通常、未訪問のリンクは青で訪問済みのリンクは赤紫、となっております。背景色が明るい場合にはそれほど神経質になることはありませんが、暗い場合にはテキストの色を変える必要が出てきます。

またリンク色が読めなくなる場合が多く、変更の必要が出てきますが、リンクの青色を黄色などに変更すると、そこがリンクと認識しにくくなります。そのような場合にはテキストのリンクを使わず、ボタンなどにしてリンクであることをはっきりさせておかないと操作性が格段に落ちることとなります。

リンク色を変更する場合

このような理由からリンク色については少なくとも色相を大きく動かすことは避けた方がよいでしょう。黄色や緑などにしてしまうと、リンクと通常のテキストとの区別が付きにくくなります。少なくともリンクの下線をスタイルシートで取り去るようなことは避けるようにしましょう。

ただし元のままの青をそのまま用いた場合、彩度、明度ともに高すぎ、Windowsでブラウン管のモニターをお使いの方にはまぶしく見えることもあります。その場合には明度や彩度を落として微調整のみ行うことにします。

関連記事：

• リンク、トラックバック、コメントについて
• 関連サイトの紹介
• 線の太さと色のコントラストから強調を考える
• サブカラーの分割
• 配色に必要な情報

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

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

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

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

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

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

関連記事：

• 明度とは
• 視認性・可読性の確保
• カラーイメージを見せる背景色
• Webの配色に関する調査のご協力お願いします
• 情報を見せる背景色

カラーコーディネーター自身のウェブサイトを確認する

最近は色彩関連企業やカラーコーディネーターもウェブサイトやブログを持っておりますので、まずそれらを確認しておくことが重要です。

色の好き嫌いは別として、美しい配色を行っているのは当然のことですが、文字が読みやすいか、操作しやすいかなどは十分に確認してください。

カラーコーディネーターは色についてのプロです。自分で作ったサイトであれ、プロのデザイナーに作ってもらったサイトであれ、色がきちんとしていないのは大問題です。特に外注の場合であれば、外注先にきちんとした色を提示できるスキルがないということです。

営業用のウェブサイトがきちんとしているかどうかは最も判断しやすいのですが、個人の嗜好がありますので、本当に依頼して良いか数人で確認すると良いでしょう。

カラーコーディネーターの得意分野を確認する

一口にカラーコーディネーターと言っても、その業務範囲はファッション分野からインテリア・建築・工業分野まで多岐に渡るため、全てをカバーすることは出来ず、各々に得意分野があります。

ウェブサイトの配色の場合は単にきれいに色を合わせればよいだけでなく、マーケティングに関する部分はもちろん、様々なインターフェイスやウェブコンテンツJISなどについての知識が要求されるため、きちんとそれらのことを把握しているかどうかなども確認しておく必要があるでしょう。

関連記事：

• 配色に必要な情報
• 活動履歴
• このサイトの趣旨
• 運営者 坂本邦夫について
• 悩んだら色を減らす

カラーコーディネーターに提供するべき情報とは

単にきれいな色を作ってくださいという依頼は、カラーコーディネーターにとって楽なもののように感じられますが、実は最も配色を行いにくい業務の一つです。

さわやかなイメージを作りたい場合でも、その配色は1つではなく、まったく違う色を使ったパターンを作り、クライアントの好みによってそれらは選ばれ、根拠のない負担が掛かることになってしまいます。

本来、ウェブサイトの配色を決める場合には、その目的や競合サイトなどの入念な調査が必要であり、それを行うことがカラーコーディネーターの仕事なのです。

そしてそれらを追求し、論理的に配色を組み立てていけば、まったく異なる配色パターンが出来上がるということも少なくなっていくはずなのです。

私が配色の仕事を行う際には、最低限の情報として、これらのことを聞いています。実際にはこれだけでは情報としては足りませんので、これを叩き台にしてヒアリングを行っています。

• サイト名（既存のリニューアルの場合はURLも）
• 業種
• サイトを制作する目的
• 主なターゲット層
• 色で伝えたいイメージ（例：楽しい、すっきりしたなど）
• 競合サイト
• ロゴマーク
• ロゴの色は変更可能かどうか
• 理想と思われるイメージのサイト
• サイトで使いたい色
• サイトで使いたくない色
• その他

配色を外部に委託するときは、少なくともこれくらいの情報を渡すようにしましょう。また成果物にこれらの情報が反映されているのか、また反映されていないとすればどのような理由かをきちんと回答してもらうようにしましょう。

関連記事：

• カラーコーディネーターの選び方
• 活動履歴
• このサイトの趣旨
• 運営者 坂本邦夫について
• センスに頼らない配色とは

画面全体の点滅を避ける

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

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

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

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

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

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

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

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

関連記事：

• 好まれる色
• 目の動きを考える
• 環境による見え方の違い
• 配色の失敗とは
• 活動履歴