OKLCHで設計する、コントラスト比に基づいた実践グレースケール＆同系色パレット

#はじめに

UIの色を選ぶとき、「なんとなく薄いグレー」「なんとなく濃い文字色」で済ませていませんか？

背景色と文字色の組み合わせには、アクセシビリティの観点から明確な数値基準があります。そして、その基準を満たすパレットを「感覚」ではなく「仕組み」で設計できる色空間がOKLCHです。

この記事では、OKLCHの知覚均一な明度（Lightness）軸を使って、コントラスト比の具体的な数値に裏付けられたグレースケールパレットを設計する方法を解説します。グレースケールだけでなく、ブルーやグリーンなど同系色でコントラストを確保するためのパレット設計についても詳しく取り上げます。

#OKLCHの基礎

#L・C・Hの3軸

OKLCHは、Björn Ottosson氏が2020年に発表したOKLab色空間の円筒座標表現で、人間の色知覚に基づいた色空間です。以下の3つの軸で色を表現します。

CSSでは oklch() 関数で記述します。

/* 明度55%、彩度0.15、色相250°（青） */
color: oklch(0.55 0.15 250);

/* グレースケール: Cを0にするだけ */
background: oklch(0.97 0 0);

#なぜHSLではなくOKLCHなのか

HSLにも L（Lightness）がありますが、HSLの明度は知覚的に均一ではありません。たとえば、hsl(60, 100%, 50%)（黄色）とhsl(240, 100%, 50%)（青）は同じ L=50% ですが、黄色のほうが圧倒的に「明るく」見えます。

OKLCHの L は人間の知覚に基づいて設計されているため、L値が同じなら、どの色相でも同じ明るさに見えます。これが「知覚均一」の意味であり、パレット設計において決定的に重要な性質です。

#コントラスト比の基礎知識

#WCAG 2.xの計算方法

WCAG 2.xでは、2色間のコントラスト比を以下の式で定義しています（Success Criterion 1.4.3 Contrast (Minimum)）。

コントラスト比 = (L1 + 0.05) / (L2 + 0.05)

ここで L1 は明るい方の色の相対輝度、L2 は暗い方の相対輝度です。相対輝度はsRGB値からガンマ補正を解除（リニア化）した上で、以下の係数で算出されます。

L = 0.2126 × R + 0.7152 × G + 0.0722 × B

結果は 1:1（同一色）から 21:1（純粋な白と黒）の範囲を取ります。

#WCAG 2.xの閾値

#WCAG 2.xの限界

WCAG 2.xのコントラスト比計算には、実務上いくつかの問題が知られています。

• ポラリティ（極性）を考慮しない — 白背景に暗い文字と、黒背景に明るい文字では、同じコントラスト比でも読みやすさが異なる
• フォントサイズ・太さとの関係が粗い — 「通常テキスト」と「大きなテキスト」の2段階しかない
• ダークモードでの過剰判定 — 暗い背景に中間色のテキストを組み合わせたとき、実際には十分読めるのに基準を満たさないケースがある

こうした課題を解決するために提案されたのが、次に紹介するAPCAです。

#APCAとは — 次世代のコントラスト評価

#概要

APCA（Advanced Perceptual Contrast Algorithm）は、人間の視覚特性をより正確にモデル化したコントラスト評価手法です。Andrew Somers氏（Myndex）が開発し、GitHubリポジトリで公開されています。WCAG 2.xの「コントラスト比」の代わりに、Lc値（Lightness Contrast）という指標を使います。

APCAの大きな特徴は以下の3点です。

1. ポラリティを区別する — 暗い背景×明るい文字と、明るい背景×暗い文字で計算式が異なる
2. フォントサイズ・太さと連動する — 大きなフォントほど低いLcで十分と判定される
3. 知覚ベースの計算 — OKLCHの L と同様に、人間の明るさ知覚に基づいている

#Lc値の推奨閾値

以下は APCA Readability Criterion で示されている推奨値です。

#OKLCHで設計するグレースケールパレット

ここからが本題です。OKLCHの L 軸を使って、コントラスト比が検証された実用的なグレースケールパレットを設計します。

#パレット定義

グレースケールでは C = 0（無彩色）なので、L の値だけでパレット全体が決まります。以下は、Tailwind CSS v4のカラーパレットを参考にした11段階のパレットです。

#コントラスト比の検証

このパレットから代表的な背景色×文字色の組み合わせを取り、WCAG 2.xの基準で検証した結果が以下です。

#ライトモード

#ダークモード

#実際に見て比較する

テーブルの数字だけではわかりにくいので、実際のレンダリングで確認しましょう。

#テキストのコントラスト比較

#ダークモードの比較

#カード型UIでの比較

#テーブルから読み取れるポイント

1. 本文テキストにはL差0.7以上を確保する — 背景50（L=0.97）× テキスト900（L=0.21）のL差は0.76で、コントラスト比は16.24
   。余裕をもってAAAを達成
2. 500番がAA通常の境界線 — 背景50 × 500（L=0.55）は4.45
   。本文テキストに使うなら600以上（L=0.45以下）が安全
3. 400番以下はテキストに使わない — 背景50 × 400は2.64
   。AA大（3
   ）すら満たさないため、装飾やプレースホルダー限定
4. ダークモードでは400番が有用 — 背景950 × 400は6.91
   。ダークモードの補助テキストとして十分機能する

#CSS Custom Propertiesでの実装

:root {
  /* グレースケールパレット */
  --gray-50:  oklch(0.97 0 0);
  --gray-100: oklch(0.93 0 0);
  --gray-200: oklch(0.87 0 0);
  --gray-300: oklch(0.78 0 0);
  --gray-400: oklch(0.68 0 0);
  --gray-500: oklch(0.55 0 0);
  --gray-600: oklch(0.45 0 0);
  --gray-700: oklch(0.37 0 0);
  --gray-800: oklch(0.27 0 0);
  --gray-900: oklch(0.21 0 0);
  --gray-950: oklch(0.14 0 0);

  /* セマンティックトークン（ライトモード） */
  --color-bg:         var(--gray-50);
  --color-bg-card:    var(--gray-100);
  --color-border:     var(--gray-200);
  --color-text-muted: var(--gray-500);
  --color-text:       var(--gray-900);
  --color-text-heading: var(--gray-800);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:         var(--gray-950);
    --color-bg-card:    var(--gray-900);
    --color-border:     var(--gray-800);
    --color-text-muted: var(--gray-400);
    --color-text:       var(--gray-100);
    --color-text-heading: var(--gray-50);
  }
}

ポイントは、プリミティブトークン（--gray-XXX）とセマンティックトークン（--color-text 等）を分離することです。ダークモードではセマンティックトークンの参照先を入れ替えるだけで、コントラスト比を維持したまま配色を反転できます。

#グレースケールを超えて — 同系色パレットの設計法

ここまではグレースケール（C=0）の話でした。実際のUIでは、ブランドカラーに基づいた同系色パレットが必要になります。

#原則：Lの差でコントラストを確保する

同系色パレットでも、コントラスト比を決定するのは明度の差です。色相（H）を固定し、彩度（C）を持たせたまま、L 値の段階を設計すれば、グレースケールと同じロジックでコントラストを確保できます。

これがOKLCHの最大の強みです。色相を自由に変えても、L値の差を同じに保てば、ほぼ同じコントラスト比が得られます。

#彩度カーブの設計

彩度（C）を全ステップで一定にすると、明度の高い色（50番台）と低い色（900番台）が不自然に鮮やかになります。人間の目は、極端に明るい色や暗い色の彩度を知覚しにくいためです。

推奨される彩度カーブは山型で、中間の明度で最大になり、両端に向かって小さくなるのが自然です。Huetoneなどのツールを使うと視覚的に確認しながら設計できます。

C
0.15 |         ●
0.12 |       ●   ●
0.09 |     ●       ●
0.06 |   ●           ●
0.04 | ●               ●
0.02 |●                   ●
0.01 ●                     ●
     ┗━━━━━━━━━━━━━━━━━━━━━━━
      50 100 200 300 400 500 600 700 800 900 950

#ブルー系パレットの具体例

色相 H = 250（青）でパレットを組んだ場合の具体例です。

#同系色でもコントラスト比はほぼ同じ

このブルー系パレットのコントラスト比を検証すると、グレースケールとほぼ同じ数値が得られます。

グレースケールの同等ペア（Gray-50 × Gray-900 = 16.24

#ブルー系での実際のレンダリング

#同系色パレット設計のチェックリスト

1. L値の段階はグレースケールと同じにする — パレットの骨格はLで決まる。グレースケールで検証済みのL値をそのまま流用できる
2. 彩度は山型カーブにする — 中間明度（400〜600）で最大、両端で最小
3. ガモットの上限に注意する — OKLCHはP3やRec.2020などの広色域を表現できるが、sRGBの範囲外になる色は、一般的なモニターで クランプ（丸め込み） される。特に高彩度かつ高明度の色（鮮やかな黄色やシアン等）は注意が必要
4. 最終確認はsRGB変換後のコントラスト比で行う — OKLCHで設計しても、WCAG 2.xの基準はsRGBベース。ツールで変換・検証を行うこと

#実践テクニック

#color-mix() による動的調整

CSS color-mix() を使えば、パレット外の中間色を動的に生成できます。

/* gray-100とgray-200の中間色 */
border-color: color-mix(in oklch, var(--gray-100), var(--gray-200));

/* 白を40%混ぜて明るくする */
background: color-mix(in oklch, var(--blue-500), white 40%);

in oklch を指定することで、OKLCHの知覚均一な空間で補間が行われます。in srgb と比較すると、中間色が「泥っぽく」ならない利点があります。

#相対カラー構文

CSS相対カラー構文（Relative Color Syntax）を使えば、既存の色の L だけを変更するといった操作も可能です。

/* ベースカラーの明度だけを0.2に変更 */
--dark-variant: oklch(from var(--brand-color) 0.2 c h);

/* 明度を20%下げる */
--darker: oklch(from var(--brand-color) calc(l - 0.2) c h);

#ダークモードの設計パターン

グレースケールパレットの場合、ダークモードではLの対応を反転させるだけで切り替えが可能です。

ただし、完全な反転ではなくコントラスト比を基準に調整するのが重要です。ダークモードではまぶしさを抑えるため、テキストに純白（L=1.0）ではなく、少しLを下げた50番（L=0.97）や100番（L=0.93）を使うのが一般的です。

#フォールバック

OKLCHは主要なモダンブラウザでサポートされていますが、古いブラウザ向けにフォールバックを提供する場合は @supports を活用します。

:root {
  /* フォールバック（sRGB） */
  --gray-900: #181818;

  /* OKLCH対応ブラウザ向け */
  @supports (color: oklch(0 0 0)) {
    --gray-900: oklch(0.21 0 0);
  }
}

#まとめ

OKLCHの L 軸が知覚均一であるという性質は、パレット設計を「感覚」から「仕組み」に変えてくれます。

押さえておくべきポイントをまとめます。

• グレースケールは C = 0 でLだけの設計 — シンプルで、コントラスト比の予測が容易
• 本文テキストにはLの差を0.7以上確保 — WCAG 2.x AA（4.5
  ）を十分に超え、AAA（7
  ）も視野に入る
• 500番（L=0.55）がAA通常の境界線 — 明るい背景（L≧0.93）に対して、本文テキストには600番以上（L≦0.45）を使う
• 同系色でもL値を揃えればコントラスト比はほぼ同じ — OKLCHの知覚均一性の恩恵で、色相を変えてもパレットの骨格を使い回せる
• 彩度は山型カーブにする — 中間明度で最大、両端で最小が自然
• WCAG 2.xで検証し、APCAで微調整する — 法的準拠はWCAG 2.x、実際の読みやすさはAPCAで確認するのが現実的

#参考リンク

• OKLCH Color Picker & Converter — OKLCHの色選び・変換ツール
• Huetone — OKLCHベースのパレット生成ツール
• WCAG 2.2 — W3C Recommendation — アクセシビリティガイドラインの仕様書
• APCA Contrast Calculator — APCAのコントラスト計算ツール
• APCA Readability Criterion (ARC) — APCAの推奨基準
• A perceptual color space for image processing (Björn Ottosson) — OKLab/OKLCHの原論文
• OKLCH in CSS: why we moved from RGB and HSL (Evil Martians) — OKLCHの実践的な解説
• MDN — oklch() — CSSリファレンス

色選びに迷ったとき、OKLCH Lightness値とコントラスト比のテーブルが、確信を持った判断の助けになれば幸いです。