インターフェースデザイナーのための色彩科学：ゼロカラーサイトを構築して学んだこと

W3Cのウェブコンテンツアクセシビリティガイドライン（WCAG）は、通常テキストに最低4.5:1のコントラスト比を要求していますが、2023年のWebAIM調査によると、上位100万サイトの83.6%がホームページでWCAG 2のコントラスト違反を検出されています。blakecrosley.comでは正反対のアプローチを取りました：まず最大コントラスト（21:1）をすべてに適用し、そこから選択的に下げていく方法です。¹

TL;DR

個人サイトをブランドカラーゼロでデザインしました。視覚的な階層構造はすべて、絶対黒（#000000）の上の白テキストを4段階の不透明度（100%、65%、40%、10%）で表現しています。この判断により、知覚的色彩科学を学ぶことになりました——sRGBが均等な間隔について嘘をつく理由、OKLCHがそれをどう解決するか、そしてダークモードがライトモードとは異なるコントラスト関係を必要とする理由です。以下のインタラクティブツールで、コントラスト比と色空間の違いを実際に試すことができます。結論：色彩知覚の背後にある科学を理解することは、美的直感よりも優れたデザイン判断を生み出します。

私のカラー「非」パレット

ほとんどのデザインシステムはカラーパレットから始まります。私のシステムはその不在から始まります：

:root {
  --color-bg-dark:        #000000;
  --color-bg-elevated:    #111111;
  --color-bg-surface:     #1a1a1a;
  --color-text-primary:   #ffffff;
  --color-text-secondary: rgba(255,255,255,0.65);
  --color-text-tertiary:  rgba(255,255,255,0.4);
  --color-border:         rgba(255,255,255,0.1);
  --color-border-subtle:  rgba(255,255,255,0.05);
  --color-accent:         #ffffff;
}

トークンは10個。ブランドカラーなし。エラー／成功／警告のセマンティックパレットもなし。視覚的な階層構造はすべて、4段階の透明度で機能しています。²

4段階が機能する理由

各段階はそれぞれ特定のコミュニケーション機能を担っています：

すべてのテキスト段階がWCAG AAA（7:1）を満たしています。40%不透明度のターシャリ段階でも8.4:1の比率を実現しており、AA最低基準の4.5:1のほぼ2倍です。絶対黒（#0a0a0aや#1a1a1aではなく#000000）というブルータリストな選択が、すべてのテキスト段階に最大限のヘッドルームを提供しています。³

--spacing-2xs事件

厳格なデザイントークンの価値を発見したのは、サブタイトルのマージンに--spacing-2xsを使用したときでした。このトークンは:root定義に存在しませんでした。CSSはサイレントに失敗し、レイアウトが崩れ、本来ならコンパイル時エラーで済むはずのスペーシング問題のデバッグに20分を費やしました。修正策：定義済みの最小トークンである--spacing-xsに変更。教訓：システムに存在しない値を使おうとしたなら、間違っているのはデザインであり、システムではありません。⁴

sRGBがデザイナーに嘘をつく理由

知覚的非均一性の問題

sRGB（ウェブの標準色空間）は、各軸（赤、緑、青）が0〜255の範囲を持つ立方体に色をマッピングします。赤チャンネルで50単位動かしても、緑チャンネルで50単位動かしたのと同じ知覚的変化は生じません。人間の目には緑に敏感な錐体が赤や青より多く、緑のシフトは同等の赤のシフトより知覚されやすくなっています。⁵

実用上の結果：16進数の値を等間隔に配置してカラーパレットを作成したデザイナーは、見た目には不均等な間隔の色を生成してしまいます。#000000と#FFFFFFの間の「中間」グレーは、#808080（数学的中間点）ではなくおよそ#777777（知覚的中間点）です。これは人間の明るさの知覚が線形関数ではなくべき乗則に従うためです。⁶

私のサイトはこの問題を完全に回避しています。白を異なる不透明度で使用するだけなので、sRGBの均一性の罠を避けられます。不透明度は黒い背景に対する知覚的透明度と線形にスケールしますが、sRGBの色混合にはこの特性がありません。

OKLCHによる解決

OKLCH（Oklab明度、彩度、色相）は、数学的に等しい距離が知覚的に等しい差異に対応する、知覚的に均一な色空間です。明度の10単位のステップは、開始色に関係なく常に同じ量の変化に見えます。⁷

/* sRGB: mathematically even, perceptually uneven */
--gray-100: #f5f5f5;
--gray-200: #e5e5e5;
--gray-300: #d4d4d4;

/* OKLCH: perceptually even steps */
--gray-100: oklch(96% 0 0);
--gray-200: oklch(88% 0 0);
--gray-300: oklch(80% 0 0);

モダンCSSはoklch()をネイティブでサポートしています。カラーパレットが必要な次のプロジェクトでは、OKLCHでパレットを定義する予定です。現在のサイトでは、不透明度ベースのシステムが異なる手段で同じ知覚的均一性を実現しています。

ダークモードの決断：ライトモードなし

私のサイトにはprefers-color-schemeメディアクエリがありません。ダークモードのみで動作します。これは意図的な決断でした。⁸

デュアルモード賛成の主張： ユーザーはライトモードのオプションを期待しています。システム設定の統合はユーザーの選択を尊重します。

反対の主張（私が選んだ方）： 2つのビジュアルシステムを維持すると、必然的にどちらも妥協することになります。黒の上で65%の不透明度で機能するデザインは、白の上では同じ知覚的な重みを得るために異なる不透明度（45%に近い値）が必要です。すべてのインタラクション状態、すべてのボーダー、すべてのシャドウの再調整が必要になります。2つのシステムをそこそこに作るよりも、1つのシステムを優れたものにすることを選びました。

絶対黒の背景（#000000）は、すべてのテキスト段階で利用可能なコントラストを最大化します：

/* My actual typography contrast hierarchy */
.hero__title     { color: var(--color-text-primary); }   /* 21:1 */
.hero__subtitle  { color: var(--color-text-secondary); }  /* 13.7:1 */
.nav a           { color: var(--color-text-secondary); }  /* 13.7:1 */
.nav a:hover     { color: var(--color-text-primary); }    /* 21:1 */

ホバー状態の遷移（セカンダリ → プライマリ）は、コントラストの変化のみで機能的なフィードバックを提供します——色の変化は不要です。

コントラストと可読性

WCAGコントラスト要件

コントラスト比は、前景色と背景色の相対輝度の差を測定します。1:1の比率はコントラストなし（同一色）を意味します。21:1の比率は最大コントラスト（白地に黒、または黒地に白）を意味します。⁹

WCAGを超えて：APCA

WCAG 2のコントラストアルゴリズムには既知の限界があります。このアルゴリズムは、暗い背景に明るい文字と明るい背景に暗い文字（極性）に関係なく、すべての色を同等に扱います。しかし研究によると、コントラストの人間の知覚は2つのモード間で大きく異なります。¹⁰

APCA（Accessible Perceptual Contrast Algorithm）は、以下を考慮してこれらの限界に対処しています： - 極性感度： 明るい背景に暗いテキストは、同じ数学的コントラスト比でも、暗い背景に明るいテキストより可読性が高くなります - 空間周波数： 細いフォントは同じサイズの太いフォントよりも多くのコントラストが必要です - 順応： 目は周囲のページの輝度に順応し、知覚されるコントラストに影響を与えます

APCAはWCAG 3.0のコントラスト要件の基礎となることが期待されています。私のサイトは極性の知見から恩恵を受けています：明るいテキストに暗い背景のみを使用しているため、ライトモードのサイトよりも高いコントラスト比が必要です。最も低いテキスト段階（40%不透明度、8.4:1の比率）でも、暗い背景の本文テキストに対するAPCAの推奨最低値を超えています。

色なしのセマンティックカラー

一般的なカラーシステムでは、機能に色を割り当てます（成功に緑、エラーに赤）。私のサイトではトランザクションUIがないため、機能的な色を完全に排除しています——フォーム、ステータスメッセージ、成功／エラー状態がありません。コンテンツは静的です。

セマンティックカラーが必要になった場合は、外科的に追加します：

アイコンとテキストを組み合わせることで、男性の約8%に見られる色覚異常を持つ方に対して失敗する「色のみによるコミュニケーション」を排除します。このアプローチはモノクロマティックなシステムも維持します。色は構造的要素ではなく、アクセントとしての役割を果たします。¹¹

タイポグラフィファーストの階層構造

色が階層を担わないため、私のサイトではタイポグラフィがすべてを担います：

:root {
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --font-size-display: 5rem;     /* 80px — hero headlines */
  --font-size-7xl:     3.875rem; /* 62px */
  --font-size-base:    1rem;     /* 16px — body text */
  --font-size-xs:      0.75rem;  /* 12px — metadata */
}

カスタムウェブフォントではなく、システムフォントを使用しています。この選択はブルータリストな決断（プラットフォームのネイティブ素材を使う）であると同時に、パフォーマンスの決断（フォント読み込みのレイテンシがゼロ、Lighthouse 100/100スコアに貢献）でもあります。ディスプレイサイズ（80px）とタイトなレタースペーシング（-0.03em）が、装飾なしで見出しに重厚さを与えます。本文テキスト16pxとゆとりある行高（1.7）は、密度よりも可読性を優先しています。¹²

0.75remから5remまでの13段階のタイプスケールは、サイズだけで階層を表現するのに十分な粒度を提供します。4段階の不透明度と組み合わせると、52通りの組み合わせ（13サイズ × 4不透明度）が可能です——色に頼ることなく、あらゆるコンテンツ階層を表現するのに十分すぎる数です。

主要なポイント

デザイナーの方へ： - カラーパレットはsRGBではなくOKLCHで定義してください。知覚的に均一な色空間は、パレット全体で予測可能な階層と一貫したコントラスト比を生み出します - ターシャリテキスト段階はAA（4.5:1）だけでなくWCAG AAA（7:1）に対してテストしてください。AAAの閾値は、実際の画面条件（低輝度、グレア、経年劣化したディスプレイ）に対する十分なヘッドルームを提供します - プロジェクトに本当に色が必要かどうかを検討してください。私のサイトは、タイポグラフィと不透明度だけで完全な視覚的階層を実現できることを証明しています

開発者の方へ： - 色の定義にはCSS oklch()を使用し、WCAG 2（現行標準）とAPCA（今後の標準）の両方でコントラスト比をテストしてください。oklch()のブラウザサポートはすべてのモダンブラウザで利用可能です - ダークモードの実装は、16進数値の反転ではなく、OKLCH空間での明度と彩度の調整で行ってください。知覚的な調整は数学的な反転よりも良い結果を生みます - 厳格なデザイントークンの強制はCSSのサイレントな失敗を防ぎます。トークンが存在しない場合、変更すべきはデザインであり、トークンシステムではありません

参考文献