人間の知覚を考慮したダークモード環境における埋め込み画像の輝度と彩度の調整について
関連文脈：
/work4aiでは、icon imgにfilter: brightness(0.9);かけてちょっと暗くしてますね/road2noma/nomadoor.icon 【…】
なるほど、参考になります…早速パクリますね（）Nrem.icon
いただきました🙏
使えるものなんでも使ってください！/road2noma/nomadoor.icon
とことんこだわるなら、アイコンも暗く+彩度落とししてますね
どのように彩度を落とす量を決めていますか？ というのも、Nrem.icon
画面が明るいほどディスプレイの発色が鮮明になることと、暗所において人間の目が色を知覚する能力が落ちることを加味しなければいけない
Claude.icon
非常に鋭い指摘です。これは単一の原則が適用される問題ではなく、対象が「UIデザイン要素」か「埋め込みコンテンツ（画像）」かによって答えが分岐します。整理して説明します。
まず前提として、
これはRichard Huntらが定式化したHuntの効果として知られており、「輝度水準が低下するに従って、色の鮮やかさ（colorfulness）の知覚が低下する」という色外観の現象です。 具体的に言うと、
明るい環境で明るいディスプレイを見ている状態では錐体（色覚）が十分に刺激され、彩度の弁別能力が高い状態にあります。 輝度が落ちてメソピック（薄暮視）メソピック（薄暮視）領域に近づくと、桿体（明暗覚）の寄与が増し、色信号の相対的な重みが変化します。これがハードウェア輝度低下で「色がくすんで見える」現象の神経生理学的な根拠です。 ソフトウェア彩度低下との対称性の問題
ここから本題です。
これらは視覚系に対して異なる信号を与えます。
ハードウェア輝度低下は「全ピクセルの絶対輝度が均等に下がる」という変換で、RGBの相対比は保たれます。
一方、CSSのfilter: saturate(0.85)やcolor-mix()によるソフトウェア彩度低下は「色相を保ちながら全ての色をグレーに近づける」という別の変換です。
「ダークモードでは彩度をやや低下させた方が自然に見える」という私が述べた原則は、 デザイナーが選択するUI要素の配色（テキスト色・リンク色・アクセントカラー・背景色等）に適用される話であり、埋め込み画像には適用してはなりません。
この区別を明示しなかったのは私の記述の不備です。
UI要素の色に対して彩度を若干抑える理由は以下の通りです。
これは「彩度が高いほど輝度が同じでも明るく見える」という知覚効果であり、暗い背景とのコンテキストでは色が「発光しているように見えて振動する」視覚疲労が生じやすいことが知られています。
UIの配色に使うためにデザイナーが意図的に選ぶ色については、このブルーミング効果を抑制するために彩度をやや落とすことが妥当です。 画像への適用：ユーザーの懸念は正しい
一方で画像は「著者が設計した内部的な色関係の体系」を持ったコンテンツです。画像の中では、オブジェクトの識別・奥行き・テクスチャ・感情的文脈等が色差（特に彩度差と色相差）によって表現されています。ここにfilter: saturate(0.8)を適用すると、画像内部の色彩コントラストが一律に圧縮され、著者の意図したコントラスト構造が失われます。
Nrem.iconこの部分ですが、もう少し詳しく解説していただけませんか？
Claude.icon画像の色彩構造とそれに対するsaturate()フィルターの影響を理解するには、まず「色のコントラスト」が単一の軸ではなく、少なくとも二つの独立した軸から成り立っているという事実から始める必要があります。
これらは神経生理学的にも独立しており、網膜での処理において輝度信号（P細胞の中心-周辺型受容野）と彩度・色相信号（P細胞とK細胞の対比拮抗型応答）は別経路を経て一次視覚野に送られます。 なぜこれが重要かというと、画像の中の「意味のある差異」は、この二軸のどちらか、あるいは両方を組み合わせて表現されているからです。
赤いリンゴを緑の葉から区別するのは主に色相差（赤と緑の対比）です。 同じ青空の中の微細な雲の形を見分けるのは輝度差です。 そして、被写体の健康的な肌の色と背景の布を区別するのは、彩度のわずかな差である場合があります。
saturate()が行っていること
filter: saturate(k)（kが1より小さい場合）は、各ピクセルの色をその「輝度等価グレー」の方向に一様に引き寄せる変換です。 数式的に言うと、あるピクセルの色をCとし、その輝度と等しいグレーをGとしたとき、変換後の色はk * C + (1 - k) * Gになります。
saturate(0.8)なら、全ピクセルが自分のグレー点に向かって20%移動します。高彩度のビビッドな赤も、くすんだオリーブグリーンも、等しく「20%グレー寄りに」されます。
なぜこれが内部の色関係を壊すのか
ここが核心です。この変換は一様で比例的ですが、それゆえに画像内部の相対的な彩度差が圧縮されます。
ある食品写真を考えます。料理（主題）の彩度が70%で、背景のプレートが30%だとします。撮影者はこの差を意図的に作り出しており、料理に視線を引きつけ、プレートを中立的に見せています。
ここにsaturate(0.8)を適用すると、料理は56%、プレートは24%になります。絶対差は40から32へ、20%圧縮されます。
数字だけ見ると小さな変化に見えますが、問題は二点あります。
1. 第一に、この彩度勾配そのものが「どこを見るべきか」という視線誘導視覚的な誘導として機能していた構造であり、その傾きが一律に小さくなります。 2. 第二に、より深刻なのが低彩度域での弁別困難です。人間の色覚は中〜高彩度域では色差の弁別能力が比較的安定していますが、低彩度域（グレーに近い領域）ではわずかな彩度差も大きな知覚的意味を持つことがあります。
たとえば暗部のシャドウに入った肌色（彩度5%程度）と隣接する布の陰影（彩度3%程度）という組み合わせを考えると、絶対差は2%しかありません。saturate(0.8)後は1.6%になります。
これはすでに弁別閾値付近にある差をさらに圧縮する操作であり、元の写真では辛うじて読み取れていた質感の境界が知覚不能になる可能性があります。 brightness(0.9)との本質的な違い
ではfilter: brightness(0.9)がなぜ比較的許容されるのでしょうか。これを考えると、上の問題がより明確に見えます。
brightness(0.9)は全チャンネル（R、G、B）を一律に0.9倍します。これが重要な性質を持っているのは、輝度比が保存されるからです。 あるピクセルAが輝度0.5で、隣のBが0.3だったとすると、変換後はA=0.45、B=0.27になります。絶対差は0.2から0.18に減りますが、比率は5:3のまま維持されます。WCACGが規定するコントラスト比（相対輝度の比）という観点では、ほぼ無傷です。 #彩度 の場合は事情が違います。前述のように彩度変換は「グレー点からの距離の圧縮」であり、色相差と彩度差という二つの次元で変換が起きます。輝度は保存されますが、クロマティック情報が損なわれます。 図表・インフォグラフィックはさらに脆弱
写真の場合は「雰囲気が変わる」程度で済む場合もありますが、図表やインフォグラフィックでは壊滅的になりえます。 たとえば「承認済み」を緑、「作業中」をティールで色分けしたフロー図があったとします。この二色は色相がやや近く、主に彩度と色相の組み合わせで区別されています。saturate(0.8)を適用すると、どちらもグレーに近づき、両者の視覚的距離が縮まります。 色覚の正常な人でも混同しやすくなり、色覚多様性のある人にとってはさらに識別困難になります。 まとめると、saturate()フィルターが問題なのは、「画像の色はそれぞれ孤立した値ではなく、相互の差異として機能している」という性質に対して、それらの差異を一様に縮小する操作だからです。
輝度変換は相対比を保つのでその構造を壊しにくいですが、彩度変換は画像が持つクロマティックな対比構造を直接圧縮するため、情報損失が生じます。 著者の意図した視線誘導視覚的誘導・質感・注意誘導カテゴリー区分はすべてその差異の中に含まれており、それを一律に縮めることが問題の本質です。 輝度をわずかに落とす理由は、ダーク背景の中で画像が光源のように浮き上がるグレア効果（光への順応の非対称性）を軽減するためです。 これは画像全体の絶対輝度を下げるだけで、内部の相対コントラストは保たれます。
暗所でディスプレイ輝度を落としている状況をさらに考慮すると、視覚系は既にやや暗順応した状態にあるため、色相の弁別感度はむしろ通常より高くなっている場合があります（暗順応による桿体の増感が色覚に干渉しない輝度範囲であれば）。 その状態で画像の彩度まで落とすと、著者が設計したより低彩度側で色差を読もうとすることになり、読み取り困難が増す可能性はご指摘の通りあります。 整理すると
デザイナーが制御できるUI要素（テキスト色、背景色、ボーダー、アイコン、アクセントカラー）については、Huntの効果への補正とヘルムホルツ＝コールラウシュ効果の抑制のために彩度を適度に下げることが合理的です。
これに対してユーザー生成コンテンツや埋め込み画像については、内部の色差構造を保護するために彩度変換を加えるべきではなく、軽度の輝度低下のみが適切な調整です。
前回の記述でこの区別を明示しなかったのは、適用範囲を曖昧なままにした不正確な説明でした。