明度とは？色の明るさと白・黒の関係を解説

明度とは色の明るさのこと。高明度・低明度、白黒との関係、配色や文字の読みやすさでの使い方を解説します。

色の基礎知識

明度とは、色の明るさ・暗さを表す考え方です。色相が違っても、明るく見える色と暗く見える色があり、その差が配色の読みやすさや印象に大きく影響します。

まず結論

明度は、白に近いほど高く、黒に近いほど低いと考えると分かりやすいです。ただしHSLのLightnessやCIELABのL*など、数値の定義は色空間ごとに異なり、同じ『明るさ』という言葉でも完全に同じ意味ではありません。

この記事の色

記事テーマを視覚的に理解するための色見本です。概念に固定の公式色がない場合は教材表示として扱います。

← 左右にスライドできます →

高明度#F6FAFE

やや高明度#DCE8F2

中高明度#AFC4D5

中明度#7696B0

低明度#46627C

かなり低明度#1E3247

明度とは何か

状態	明度	見え方
白に近い	高い	軽い、明るい
中間	中程度	安定、穏やか
黒に近い	低い	重い、落ち着く

同じ色相でも明度は変えられる

青でも、空色のように明るい青と、紺色のように暗い青があります。色相が同じ・近い場合でも、明度差を大きくすると見分けやすくなります。

明度差は読みやすさに直結する

文字と背景の可読性では、色相差よりも明るさの差が重要になることがあります。青文字と緑背景のように色相が違っていても、明るさが近いと読みにくくなる場合があります。

明度とコントラストは同じではない

一般的な色彩用語としての明度と、Webアクセシビリティで使う相対輝度・コントラスト比は別の概念です。実際のUIではコントラスト比を確認してください。

HSLのLightnessと知覚的な明るさは別

HSLのL値はデジタル操作には便利ですが、人が感じる明るさを均等に表す指標ではありません。CIELABのL*などは知覚的な均等性を意識した別の指標です。『L=50なら同じ明るさ』と単純には言えません。

配色で明度を使うコツ

本文文字と背景は十分な明度差をつける
同系色配色では明度差をつけると階層が作りやすい
アクセント色は色相だけでなく明度差でも目立たせる
淡色同士では枠線や影も併用する

色しるべで明るさを比較する

色を並べる色比較を使う色比較へ →鮮やかさとの違い彩度を見る関連記事へ →色みとの違い色相を見る関連記事へ →明度＋彩度トーンを見る関連記事へ →

同じ色相でも明度でここまで変わる

明度は、色の明るさ・暗さを表す考え方です。下は青系を使った教材表示で、色相を大きく変えずに明度差を見せています。

高明度

やや高い

中明度

やや低い

低明度

HSLのLightnessと知覚的な明るさは別物

Webで使うHSLのL値は便利な数値ですが、人が感じる明るさを均等に表す尺度ではありません。CIELABのL*などとも同一ではありません。

同じ青でも明度が変わると見え方はここまで変わる

明度を理解するときは、色相をできるだけそろえて明るい方向から暗い方向へ並べると分かりやすくなります。下は青系を使った教材表示です。

高明度

やや高明度

中明度

やや低明度

低明度

明度差は可読性にも直結する

文字と背景の読みやすさは、色相差だけでなく明るさの差が重要です。ただし、ここでの段階は教材用で、CIELABのL*やHSLのLightnessを同じ尺度として扱うものではありません。

明度差は配色の読みやすさを左右する

配色では、色相が違っていても明るさが近いと文字や境界が見分けにくくなることがあります。反対に、同じ色相でも明度差が十分あれば、情報を整理しやすくなります。

組み合わせ	見え方の傾向	注意点
明るい色 × 暗い色	境界を認識しやすい	実際の可読性は文字サイズや背景も含めて確認
明るい色 × 明るい色	やわらかいが差が小さい	文字やUIではコントラスト不足に注意
暗い色 × 暗い色	重厚だが沈みやすい	細い文字・小さい文字は読みづらくなりやすい