雑学・読み物 2026年6月29日

その配色、読めない人がいます──文字色と背景色のコントラスト比4.5:1の意味

おしゃれに見えるグレー文字や白×水色の配色、実は読みづらい人が一定数います。国際基準WCAGが定める文字色と背景色のコントラスト比4.5:1の根拠と、よくあるNG配色、自分のサイトで確認する方法を整理します。

デザインをおしゃれに仕上げようと、本文の文字を薄いグレーにしたり、背景を淡い水色にしたりしていませんか。「見た目は洗練されているのに、なぜか読みにくいと言われる」という経験はないでしょうか。

それは気のせいではありません。文字色と背景色の明暗差（コントラスト比）が足りていないと、実際に読めない・読みづらいと感じる人が一定数存在します。

結論を先に書きます。

国際基準では通常の文字は「コントラスト比4.5:1以上」を確保することが定められています。これは好みの問題ではなく、ロービジョン（弱視）の方や高齢者を含め、多くの人が実際に文字を判読できるかどうかの境界線です。

WCAG AA基準「4.5:1」の根拠

Web上のアクセシビリティ基準として広く採用されているWCAG（Web Content Accessibility Guidelines）では、通常サイズの文字についてコントラスト比4.5:1以上を満たすことを「レベルAA」の達成基準としています。

コントラスト比は、最も明るい白（1.0）から最も暗い黒（21.0）までの範囲で表され、数値が大きいほど明暗差がはっきりします。

この4.5:1という数値は、加齢による視力低下や軽度のロービジョンを持つ人が、実用的な速度で文字を読める限界値として、視覚研究の被験者データをもとに設定されたものです。健常な視力の人には「気にならない差」でも、見え方に個人差がある人にとっては「読めるか読めないか」を分ける境界線になります。

なお、文字が大きい場合（目安：太字18pt以上、通常24pt以上）は3:1まで許容されます。見出しなど大きな文字は多少コントラストが緩くても判読できるためです。

数年前から、本文を真っ黒（#000000）ではなく薄いグレー（#999999など）にする配色がデザインのトレンドとして広まりました。柔らかい印象になり見た目は洗練されますが、これはコントラスト比を大きく落とす典型例です。

文字色	背景色	コントラスト比	WCAG AA
#000000（黒）	#FFFFFF（白）	21:1	合格
#595959（濃いグレー）	#FFFFFF（白）	約7:1	合格
#999999（薄いグレー）	#FFFFFF（白）	約2.8:1	不合格
#CCCCCC（さらに薄いグレー）	#FFFFFF（白）	約1.6:1	不合格

「おしゃれなグレー」として使われがちな#999999クラスの薄いグレーは、白背景に対してコントラスト比が2.8:1程度しかなく、WCAG AAの4.5:1を大きく下回ります。本文には使わず、キャプションや補足情報など「読めなくても致命的でない」箇所に限定するのが安全です。

もう一つの典型的な失敗が、白文字に水色系の背景（またはその逆） の組み合わせです。爽やかな印象を狙って採用されがちですが、水色は明度が高い色のため、白文字との明暗差がほとんど出ません。

「白文字は背景が濃い色のときだけ使う」と覚えておくと失敗しにくくなります。ボタンやバナーで白文字×パステルカラー背景を使う場合は、必ず数値で確認する習慣をつけてください。

コントラスト比は目視の感覚で「読めそう」と判断するものではなく、HEXコード（色コード）から機械的に計算できる数値です。文字色と背景色のRGB値から輝度を算出し、決まった計算式でコントラスト比を出します。

自分のサイトやデザインの配色を確認したいときは、色コードを整える に文字色と背景色のHEXコードを入れれば、コントラスト比とWCAG AA/AAAの合否がその場で分かります。HEX⇔RGB⇔HSLの相互変換もできるので、「もう少し濃くしたら基準を満たすか」を数値で調整しながら確認できます。

「見た目のおしゃれさ」と「実際に読めること」は別軸です。配色を決める最後の一手として、コントラスト比の数値確認を習慣にしておくと、誰にとっても読みやすいデザインに近づきます。