やじうまWatch

黒文字にグレーバック、適切な明度比は？　W3Cの指針を紹介したエントリーが話題に

  • tks24

2016年7月28日 05:55

　ウェブサイトの見出しや本文で、背景に薄いグレーを敷いたり、あるいは本文の文字色に黒ではなく若干薄いグレーを用いるケースはよくある。サイトデザイン全体にまとまりを出すためによく使われるTipsだが、背景と文字の明度が近いと可読性が低下するなど、リスクも多い。これまではデザイナーが経験則で決めていたこのグレーの使い方について、W3Cが定めた指針を分かりりやすく解説したエントリーが多数のブックマークを集めていた。それによると、白背景にグレーの文字を使う場合、およびグレーの背景に白文字を使う場合は、ともに「明度46％（#767676）以内」が目安となるのだとか。この目安は文字のサイズによっても異なり、大きさが18ポイント以上であれば明度58％（#949494）までは許容されるとのこと。指針ではこのほかにも、明度90％（#E6E6E6）以上の薄いグレーの背景に文字を載せる場合の目安についても書かれている。WCAG 2.0に記載されている内容ということで、既に知っている人も多いはずだが、知識として抜け落ちていたという人がいれば、メモないしブックマークをしておいたほうがよさそうだ。