ポータルの旅猫がデザインを学ぶ、夕暮れのアトリエ

明度対比

Lightness contrast

明るい色と暗い色を並べて生まれる見え方の差です。

色彩・配色

意味

色の明るさの違いがつくる対比です。色相が似ていても明度差をつけると形を区別しやすくなり、逆に差が小さいと境界があいまいになります。

かんたんに言うと

明るい色と暗い色を並べて生まれる見え方の差です。

具体例

制作の場面で考えてみましょう。

濃い色の背景に明るい文字を載せると、商品名や案内を読み取りやすくできます。

見て、試して、確かめる

文字の明るさだけを変える

左右は同じ展示案内です。背景、文字の大きさ、位置は同じまま、文字の明るさを変えて見え方を比べています。

比較A明度差が小さい案

文字と背景の明るさが近く、細い文字や小さな案内が読みにくくなっています。

比較B明度差を確保した案

文字を濃くして背景との明るさの差を広げ、情報を見分けやすくしました。

01自分で試す

同じ案内を淡い紙色に載せ、文字の色だけを変えた2案をつくってください。

変えるのはここだけ背景、文字の大きさ、太さ、位置は変えません。色相の好みだけでなく明るさの差を見ます。

02自分で確かめる

できた案を見ながら確認します。正解を採点するチェックではありません。

案を見直すヒント

画面上だけで決めず、可能なら実際の紙や素材に近い状態でも見てください。読みづらければ色の明るさを調整します。

理解のポイント

読みやすさは明度差だけでは決まりません。文字の太さ、大きさ、素材の反射、照明条件も確認します。

参考資料

Adobe — Colour Contrast Guide ↗
← 色彩・配色のことばへ戻る