OKLCHとは？WEBデザインで色を扱う新しい考え方

TIPS

WEBデザインで背景やボタンの色を調整するとき、同じ色の濃淡を作ったつもりでも、明るさや鮮やかさが思ったようにそろわないことがあります。そこで役立つ色の表し方がOKLCHです。色を「見た目の明るさ」「色の強さ」「色み」に分けて考えられるため、用途に合わせて調整しやすくなります。ここではCSSの書き方と、案内カードを作る具体例を紹介します。

OKLCHとは？L・C・Hの3つの数値を読む

OKLCHは、人が感じる色の違いを扱いやすくするために設計されたOklabという色空間を、明るさ・色の強さ・色相で表す方式です。CSS（WEBページの見た目を指定するルール）ではoklch(48% 0.12 250)のように書きます。この指定はおおよそ青#1A609Eに相当します。

L（Lightness）：知覚上の明るさ。0%は黒、100%は白に対応します。背景と文字の明るさの差を考える際の手掛かりです。
C（Chroma）：色の強さ。0なら無彩色で、数値を大きくすると色みが強まります。ただし表示できる範囲は明るさ・色相・画面の性能によって変わります。
H（Hue）：青や緑などの色みを角度で表します。250は青系の方向ですが、HSLの色相角度とは数値の対応が異なります。

HSLにも明度を表すLがありますが、OKLCHのLは人の知覚を考慮した尺度です。ただし同じLでも、文字と背景のコントラスト比まで一致するわけではありません。またCの0.12はHSLの彩度12%とは別物です。末尾に/ 0.5を付けたoklch(48% 0.12 250 / 0.5)のような書き方では、不透明度50%も指定できます。

案内カードをOKLCHで配色する具体例

サービスの使い方を案内するカードを作ります。色相Hを250でそろえ、背景には明るく色みの少ない青、ボタンには濃く強めの青を使います。以下の6桁HEXは、各OKLCH値を一般的な画面で使われるsRGB色空間へ換算し、整数に丸めた目安です。

カード背景：oklch(95% 0.018 250)、淡い青#E6F0FA。Lを高く、Cを低くして広い面に使います。
本文・見出し：oklch(30% 0.035 250)、濃い青灰色#202F3F。背景との差を確保します。
小さなラベル：oklch(88% 0.045 250)、薄い青#C2DAF5。補助情報の背景です。
案内ボタン：oklch(48% 0.12 250)、青#1A609E。背景よりCを高くして操作部分を区別します。
ホバー時：oklch(40% 0.10 250)、濃い青#124A7B。色相を変えずLを下げます。

<section class="help-card">
  <span class="help-card__badge">はじめての方へ</span>
  <h2>サービスの使い方を確認</h2>
  <p>操作方法をひとつずつ説明します。</p>
  <a class="help-card__link" href="/guide/">ガイドを見る</a>
</section>

.help-card {
  max-width: 36rem;
  padding: 1.5rem;
  border-radius: 1rem;
  background-color: rgb(230 240 250);
  background-color: oklch(95% 0.018 250);
  color: rgb(32 47 63);
  color: oklch(30% 0.035 250);
}
.help-card__badge {
  display: inline-block;
  padding: .3rem .75rem;
  border-radius: 999px;
  background-color: rgb(194 218 245);
  background-color: oklch(88% 0.045 250);
}
.help-card__link {
  display: inline-block;
  padding: .75rem 1rem;
  border-radius: .5rem;
  background-color: rgb(26 96 158);
  background-color: oklch(48% 0.12 250);
  color: rgb(255 255 255);
  text-decoration: underline;
}
.help-card__link:hover {
  background-color: rgb(18 74 123);
  background-color: oklch(40% 0.10 250);
}
.help-card__link:focus-visible {
  outline: 3px solid rgb(26 96 158);
  outline-offset: 4px;
}

ボタン文字は白#FFFFFFです。CSSは先にrgb()で近似色を指定し、直後にoklch()を置いています。対応ブラウザーでは後者を採用し、非対応の古い環境ではRGB値を使う書き方です。/guide/は例示のリンク先なので、実際に設置する際は変更してください。

色域と文字のコントラストを確認する

濃い青灰色の文字#202F3Fとカード背景#E6F0FAのコントラスト比は約11.83:1、ラベル背景#C2DAF5との比率は約9.51:1です。白文字#FFFFFFとボタン背景#1A609Eは約6.54:1、ホバー時の濃い青#124A7Bとは約9.17:1です。いずれもWCAG 2.2が通常サイズの文字に求める4.5:1を上回ります。

キーボード操作時のフォーカス枠線には青#1A609Eを使い、カード背景#E6F0FAとの比率は約5.67:1です。操作上必要な枠線などには、隣接色との非テキストコントラスト3:1も重要です。色だけでなく枠線や下線でも操作状態を伝えましょう。

OKLCHはCを高くしすぎると、一般的なsRGB画面が表示できる色の範囲（色域）を超える場合があります。ブラウザーが表示可能な色へ調整すると、想定した見え方から変化することがあります。今回の指定色はsRGBの範囲内ですが、色相やCを変更したら再確認が必要です。また、OKLCHのLだけで文字の読みやすさは判断できません。実際に隣接する色の組み合わせを測りましょう。

HueRollでは選択色のHEX・RGB・HSLなどを確認できます。ただしOKLCHの直接入力・表示や任意の2色のコントラスト判定ができるとは案内されていません。基準色の検討に活用しつつ、OKLCHの調整と完成画面の検証はCSSなどで行います。