移行中の知識
明度
Lightness
定義
明度（lightness）とは、ある色が、同じように照明された白い領域と比べてどの程度明るく見えるかという知覚属性です。CIEではrelated colourに対して定義され、brightnessとは基準が異なります。LabやOKLCHのLはこの種の知覚的な明るさを扱うために設計されていますが、HSLのlightnessはRGB成分から作られた別のcomponentで、同じ値が異なる色相で同じ知覚明度になるとは限りません。
関連
対比すると分かりやすい概念
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
ボタン・hover・selected state
同じアクセント色の階調
見るポイント
同じ色相系統の中でlightnessを変え、通常・hover・selectedの差を作る。差が小さすぎて状態を識別できない、または明度差によって文字コントラストが崩れていないかを見る。
ダッシュボードのsurface
面の階層を明暗で分ける
見るポイント
背景、card、floating panelのlightness差で層を分ける場合、shadowだけに頼らず隣接面同士が区別できるかを確認する。dark modeでも同じ数値差を機械的に反転しない。
理解
理解のポイント
- context-freeな色と感情の研究では、明るい色とよりpositiveな感情概念の連想など一定の傾向が報告されているが、特定UIで同じ感情を生じさせる因果としては扱わない。
注意
誤解しやすい点
- lightness、brightness、relative luminanceを同じ「明るさ」の尺度として扱う。
- 同じHSL lightness値なら、異なる色相でも知覚上同じ明度になると考える。
- 明度差があるだけで十分な文字コントラストを満たすと判断し、実際のcontrast ratioを確認しない。
- 明るい色は常にpositive、暗い色は常にnegativeという普遍的な意味へ一般化する。
関連
関連する概念
出典