一言で灰色と言っても、明るいものもあれば暗いものもあり、実に様々なバリエーションがあります。Webサイトなどでは、いたるところでお目にかかることのできる色でもあります。濃い灰色は主に見出しや本文に、薄い灰色はメタデータ、分類名、説明文に多く使われます。これらの色合いのうち、最も乱用されるのは薄い灰色です。
薄い灰色の文字の問題点
文字色として薄すぎる灰色は可読性に問題を起こしかねません。灰色の文字を薄くしすぎてしまえば、読者が読むにあたって支障をきたすことになります。文字の明度によっては、薄い色の背景に混ざってしまうのです。この現象は、単語や文字をぼやけさせ、判読を困難にします。無理に判読を試みれば、目を傷めてしまうでしょう。
また、薄い灰色の文字は読者の誘導についても問題を抱えています。メニューの文字を判読できなければ、読者は間違ったものを選択してしまうか、手間をかけてクリックするのを厭うことになります。この状況は、項目の多いメニューの場合には特にストレスをもたらすものです。無効化されているように見えて、項目を見逃すことにもつながるでしょう。
明度差の乏しい文字は一般読者に影響するのみならず、視覚に障碍がある読者や、高齢の読者にも影響します。こういった場合だけでなく、低解像度のモニターや携帯端末を使用する読者、暗い場所で読んでいる読者もいます。文字色の明度差は、すべての読者に影響を及ぼすのです。
明度46%
薄い灰色の文字が読者にとって読みづらいという知識だけでは不十分です。デザイナーにとって、どの程度薄いと薄すぎる色なのかを知ることが重要です。はっきりした基準なしでは、「薄すぎる」というのは相対的なものなってしまいます。
国際インターネット標準化機関であるWorld Wide Web Consortium（W3C）は、WCAG 2.0を発表しました。これは、制作物の見やすさを向上する手法について定めた指針です。この中で、通常の大きさの文章は、最低でも明度比4.5対１とすることが推奨されています。
灰色は、色相も彩度も持たず、明度のみを持つ唯一の色です。明度が上がれば、より薄い灰色となります。明度の調整はパーセント基準で行います。
白地の背景の中で、灰色の文字に前述の明度比を適用するということは、その文字は明度46% （#767676）を超えるべきでないということです。これが明度比の基準を逸脱しない、灰色の文字の明度の上限となります。白文字の背景として灰色を使う場合についても、明度46%以内とするべきです。
大きさ18ポイント以上の文字における明度58%
18ポイントを超える大きさの文字については、灰色をより薄くすることが可能です。大きい文字は判読が容易なためです。この場合でも、明度58% （#949494）以内に止めるべきです。大きな文字であっても、灰色が薄すぎれば判読が困難になります。
灰色の背景の場合の閾値
前述した明度の閾値（いきち）は、白地の背景上の文字に関するものです。灰色の背景上に文字を配置する場合には、文字色をこれよりも濃くすることが必要となります。
薄い灰色の背景とは、明度90% （#E6E6E6）以上のものを指します。ここから、通常の大きさの文字について、先の4.5対１の閾値は明度40% （#666666）と定められます。大きさ18ポイント以上の文字の場合は、閾値は明度50% （#7F7F7F）です。灰色の背景上では、文字の明度はこれらの値を超えないようにしましょう。
「薄すぎる」が意味すること
デザイナーが灰色の文字を採用するのは、何も読者の判読を困難にしようというわけではありません。主要な文章をより目立たせようとしているのです。しかし、灰色の薄さとそれが読者に与える影響にデザイナーが気づかなければ、問題が発生してしまいます。
前述のWCAG 2.0の明度比は、デザイナーに対し、「薄すぎる」とは何を意味するのか、はっきりした基準を示すものです。「薄すぎる」とは、もはや観念的な感想ではありません。デザイナーは、灰色の文字が薄すぎるという読者の声に対し、基準となる点を手に入れたのです。
