明度とは
読み：めいど英語：Lightness / Value
更新日：2026年10月31日
ひとことで
明度とは、色の明るさの度合いのことです。明度が高いほど白に、低いほど黒に近づきます。
ひとに説明するなら
「明度は明るさの物差し。白にいちばん近いのが明度の高い色、黒にいちばん近いのが明度の低い色。文字が読みやすいかどうかは、ほとんどこの明度の差で決まる」
明るさの物差し
明度は、色の三属性（色相・彩度・明度）のひとつです。同じ青でも、空のような明るい青は明度が高く、夜のような深い青は明度が低くなります。
色みのない白・灰・黒も、明度だけは持っています。白がいちばん明るく、黒がいちばん暗い色です。
色ごとに、もともとの明るさが違う
いちばん鮮やかな状態の色どうしでも、明るさは同じではありません。画面上の純粋な黄色（#FFFF00）はとても明るく、純粋な青（#0000FF）はかなり暗い色です。
白い背景に置いてみると、その差がはっきりします。白に対する黄色のコントラスト比は 1.07:1 で、ほとんど区別がつきません。青は 8.59:1 で、くっきり読めます。
1.07:1
- AA 本文の文字（4.5:1 以上）不合格
- AA 大きな文字・図形（3:1 以上）不合格
- AAA 本文の文字（7:1 以上）不合格
HSL の「L」に注意
CSS の HSL には L（Lightness）という明るさの値があります。ただし HSL の L は、人の見え方とはずれがあります。L を同じ 50% にしても、黄色は明るく、青は暗く見えます。
見た目の明るさをそろえたいときは、OKLCH の L を使うのがおすすめです。人の見え方に近づけて作られているので、L をそろえると、見た目の明るさもそろいやすくなります。
oklch(65% 0.15 250) → #3A93E6
明度の差を確かめるコツ
配色を白黒（グレースケール）にしてみると、明度の差がよく分かります。白黒にして見分けがつかない色どうしは、明るさが近い組み合わせです。文字と背景にするなら、白黒でもはっきり分かれる組み合わせを選びます。
よくある勘違い
勘違い鮮やかな色は、どれも同じくらいの明るさ
ほんとうは鮮やかな黄色はとても明るく、鮮やかな青は暗い色です。色ごとに、もとの明るさが違います。
勘違いHSL の L が同じなら、同じ明るさに見える
ほんとうはHSL の L は見え方とずれがあります。見た目の明るさをそろえるなら、OKLCH の L を使います。
COLOR JOURNEY で使うには
COLOR JOURNEY のパレットは、6色を暗い色から明るい色の順に並べています。左端がいちばん明度の低い色、右端がいちばん明度の高い色です。
文字と背景の組み合わせに迷ったら、まず左端と右端の色を組み合わせてみてください。パレットの中でいちばん明度の差が大きく、読みやすい組み合わせになりやすいからです。実際に使うときは、コントラスト比も確かめておくと安心です。
参考になるパレット
クイズ
白い背景に文字を置くとき、いちばん読みにくいのは？
純粋な青
ちがいます。答えは「純粋な黄色」。黄色は明度が高く、白とのコントラスト比は 1.07:1 しかありません。
純粋な黄色
正解です。答えは「純粋な黄色」。黄色は明度が高く、白とのコントラスト比は 1.07:1 しかありません。
黒
ちがいます。答えは「純粋な黄色」。黄色は明度が高く、白とのコントラスト比は 1.07:1 しかありません。
見た目の明るさをそろえたいときに向いている値は？
HSL の L
ちがいます。答えは「OKLCH の L」。OKLCH の L は人の見え方に近づけて作られています。
OKLCH の L
正解です。答えは「OKLCH の L」。OKLCH の L は人の見え方に近づけて作られています。
RGB の R
ちがいます。答えは「OKLCH の L」。OKLCH の L は人の見え方に近づけて作られています。
よくある質問
明度とは何ですか？
色の明るさの度合いです。高いほど白に、低いほど黒に近づきます。
明度と彩度の違いは何ですか？
明度は明るさ、彩度は鮮やかさです。別々の物差しで、組み合わせで色の印象が決まります。
文字の読みやすさは何で決まりますか？
主に、文字と背景の明度の差で決まります。その差を数値にしたものがコントラスト比です。
明度の差を簡単に確かめる方法はありますか？
配色を白黒（グレースケール）にして見る方法があります。白黒で見分けにくい組み合わせは、明るさが近い色どうしです。