読みにくい配色を避けるための色の基礎

2026年9月23日文責：ウホウホ

薄いグレーの文字が読めない理由を、コントラスト比という数値で説明します。WCAGの基準値、色覚多様性に配慮した設計、HSLで統一感のある配色を組み立てる方法を解説します。

「おしゃれな薄いグレー」が読めない理由

白い背景に薄いグレーの文字。洗練されて見える配色ですが、多くの人にとって読みにくい配色でもあります。

読みやすさは感覚ではなく、コントラスト比という数値で測れます。 2つの色の明るさの差を比で表したもので、1:1（同じ色）から21:1（白と黒）までの範囲を取ります。

この数値は「見た目の明るさ」ではなく、人間の目が実際に感じる明るさ（相対輝度）を計算したうえで比を取ります。人間の目は緑に最も敏感で、青に最も鈍いため、同じ数値のRGBでも緑のほうが明るく感じられます。計算式にはこの偏りが組み込まれています。

ウェブアクセシビリティの国際基準（WCAG）では、次の値が求められています。

レベル	通常の文字	大きな文字（18pt以上、または14pt以上の太字）
AA（実質的な最低ライン）	4.5:1 以上	3:1 以上
AAA（より高い水準）	7:1 以上	4.5:1 以上

大きな文字の基準が緩いのは、文字が太く大きいほど輪郭を認識しやすいためです。見出しは多少薄くても読めますが、本文には4.5:1を確保してください。

純粋な赤や青が意外と低いことに注意してください。鮮やかな色は目立ちますが、明るさとしては中間的なので、白にも黒にも十分なコントラストを持ちません。 目立つことと読みやすいことは別です。

任意の色の数値は、カラーコード変換ツールで白文字・黒文字それぞれについて確認できます。

コントラスト比と並んで重要なのが、色以外の手がかりを併せて用意することです。

日本人男性の約5%、女性の約0.2%が、特定の色の組み合わせを区別しにくい色覚特性を持つとされています。20人にひとりという割合は、決して例外ではありません。最も多いのは赤と緑が似て見えるタイプです。

画面をグレースケールにしても意味が伝わるかが、手軽で確実な確認方法です。スクリーンショットを撮って白黒に変換してみてください。

色を指定する方法にはHEX、RGB、HSLがありますが、 配色を考えるときはHSLが圧倒的に扱いやすいです。

基準の色を決めたら、色相と彩度を固定したまま明度だけを動かします。 たとえばボタンの通常色が明度52%なら、ホバー時は45%、押した状態は38%。色味がぶれないので、自然にまとまります。

HEXのまま「もう少し暗い青」を探そうとすると、 16進数を勘で動かすことになり、色味がずれます。 HSLなら数値の意味が直感と一致します。

明るい配色をそのまま反転させると、不自然に見えることがあります。