マーケティングとブランドはダークモードでも色相ロジックを崩さないグラデーションを求め、コンプライアンスは本文と背景のコントラストを数値で追跡可能にしたがります。OKLCHは人間の視覚に近いL（明度）・C（クロマ）・H（色相）で色を表し、従来のHSLより設計トークンに向いています。color(display-p3 …)は、Appleディスプレイが長年持つ広色域をCSSから直接狙う手段です。EleventyやHugoなどビルド一回・長期キャッシュの静的サイトでは、ランタイムのテーマエンジンが無いぶん、トークン設計とフォールバックをビルド時に固める必要があります。すでに 静的マーケHTMLのCSSサブグリッドでレイアウトQAのリズムを作っているチームは、同じ「週次の実機枠」を色に拡張するのが最短です。
この記事では、会議に持ち込めるブラウザ対応表、コピペ可能な@supportsパターン、クロマ上限やトラフィック比率など引用できる数値、そして短期レンタルのMac miniで検証コストを抑える手順をまとめます。
静的サイトにOKLCHが向く理由
HSLは「明度固定で彩度だけ動かす」と黄と青で主観差が激しく、デザインシステムはすぐに「同じルール、別々の手修正hex」地獄に落ちます。OKLCHならホバーやダーク切替でLを少し下げるだけで視覚的に揃いやすく、静的ビルドで:rootに展開するだけで全ページに波及します。例としてoklch(0.72 0.11 250)を基調色、oklch(0.62 0.09 250)をホバー、のように段階を数値で共有できます。
クロマCは大きければ良いわけではありません。中間の明度帯では0.37前後を超えるとsRGBへのクリッピングでバンディングや色相ずれが出やすいです。ブランドガイドに「許容最大C」を明文化しておくと、ジュニア実装の暴走を防げます。
静的サイトはCIでoklch()トークンを走査し、本文テキストとのコントラストがWCAG 2.2の通常テキスト4.5:1を満たすかを自動判定すべきです。人間のモニタ比べより再現性が高いです。
日本語見出しは欧文より字面密度が高く、同じフォントサイズでも重く見えます。Lを+0.02〜0.04だけ上げる調整は、字重をいじるより自然で、多言語テンプレでも再利用しやすいです。
写真上のスクリムにはcolor-mix(in oklch, …)で混合比率を固定し、READMEに数値を残しましょう。次のキャンペーン差し替えでコントラストが崩れる事故を防げます。
display-p3と@supportsの重ね方
まず:rootにsRGBで安全なhexまたはhslを置き、特性検知で上書きします。
:root {
--brand: #2563eb;
}
@supports (color: color(display-p3 1 1 1)) {
:root {
--brand: color(display-p3 0.22 0.45 0.98);
}
}静的CSSはキャッシュ寿命が長いので、上書きブロックはトークン定義のすぐ下に置き、数十ファイルに散らばらせない運用が長期保守に効きます。線形グラデーションは、sRGBに収まるストップを先に書き、@supports (background: color(display-p3 0 0 0))内にだけ高クロマ版を入れる二段構えが安全です。
ヒーロー動画やWebGL背景の上に載せるテキストは、同じOKLCHでもデコード経路で縁のコントラスト感が変わります。数値だけでなく実機スクショを証跡に残してください。
印刷用スタイルではP3変数をsRGB等価へ戻すのが無難です。オフィス複合機は広色域を解釈しないことが多く、インク見積もりも狂います。
メルマガやバナーなど別チャネルがある場合は「Webトークンと印刷・配信物のスウォッチは別管理」と明記し、古いHTMLメール向けにフラットPNGを用意します。
2026年時点の対応表
| 機能 | Chromium | Firefox | Safari（macOS） | 静的QAの観点 |
|---|---|---|---|---|
| OKLCH色 | 111+ | 113+ | 15.4+ | 低L高Cでのクリップとバンディング。 |
| color(display-p3 …) | 対応 | 対応 | 対応 | 参照PNGと2×解像度で比較。 |
| oklchのcolor-mix | 111+ | 113+ | 16.2+ | マイナーアップデート後に再検証。 |
| 強制カラー/高コントラスト | 一部 | 一部 | OS依存 | macOSのコントラスト強化を週次で。 |
リリースノートにエンジン版を書いておくと、クレーム時に「ブランドが広色域に振ったのか」「ブラウザのフォールバックか」を切り分けやすくなります。
Safari実機とクラウドMac mini
Playwright WebKitは構文エラーには強いですが、フォントラスタライズや色彩管理は実Macと一致しません。イテレーションごとに25〜40分、安定版Safariで外部サインオフ、STPで先行バグ取りが現実的です。デジタルカラーメータでヒーロー領域を測るとデザイナ説得が速いです。
調達が間に合わない場合はクラウドMac miniを数日借りる手もあります。MacHTMLのAppleシリコン枠は概ね1日$16.9前後からで、SSHでビルド投入、VNCで目視比較が可能です。
ステージングでは本番と同じcolor-scheme、meta theme-color、フォントURLを揃えてください。光学サイズの欠落は数値が同じでも見え方を変えます。
PRには1280pxと430pxの短い画面録画に加え、「コントラストを上げる」をオンにしたクリップを添付すると、静的diffより早く合意形成できます。
CDNのキーはOKLCHを含むCSSハッシュと同期させましょう。HTMLとCSSのキャッシュ不一致は「Safariだけ色がおかしい」誤報の典型原因です。
コントラストとシステム設定
WCAG 2.2のコントラストはsRGB相対の枠組みです。P3でsRGB域外まで明るい青を使う場合、「sRGBに写像した値での比」と「設計意図の域内比」の両方を記録し、監査でどちらを採用するか決めてください。
macOSの「透明度を下げる」は半透明を不透明に置き換えます。OKLCHスクリムが一気に濁るので、@media (prefers-reduced-transparency: reduce)でLを上げCを下げた別トークンを用意します。
Windowsの高コントラストは作者色を無視しがちです。フォーカスリングはシステムキーワード経路を残してください。
地域によりますが2026年初頭でも6〜9%前後のセッションがOKLCH非対応ブラウザに乗ることがあります。自サイトの計測で下げられるまでhex/hslフォールバックを維持してください。
色のリファクタと同じリリースで影やblurをいじると、フォーカス可視性が同時に壊れがちです。キーボード操作の回帰もセットで。
静的ジェネレータとの連携
Eleventy/Hugo/Astroいずれも、ビルドでYAMLトークンを読み:rootへ展開できます。ソースオブトゥルースはOKLCHに統一し、ビジネス側がhexで話してもコンパイル時に丸め、LとCは小数三位でdiffノイズを抑えます。
CMSで強調色を選ぶUIがあるなら、承認済みのクロマスライス外はビルド失敗にし、インラインstyleでの回避を防ぎます。
Linux CIのStorybookは「sRGBベースライン」とラベルし、夜間ジョブでトークンPNGと基準の色差（Lab換算でΔEが2.0超）を検知したらデザインシステムチャンネルへ通知します。
エッジでダーク切替クラスを注入する実験では、hexだけでなくOKLCHのmixも再計算してください。data-theme="dark"だけ先に付いて広色域オーバーレイが明るいまま、という二重事故がよくあります。
ホットフィックス後にCDNを原子更新できないと、古いCSSに新HTMLが混ざります。トークン変更はキャッシュパージとセットにし、Safari全量確認の後でTTL延長が安全です。
FAQ
静的サイトは2026年にOKLCHを既定にすべきか
トークン主形式としては推奨ですが、最低サポートブラウザが許すまで本文色はOKLCHのみにしないでください。
Safariのdisplay-p3はChromiumと同じか
仕様は揃いますが見え方は異なることがあります。実機が最終です。
色彩QAの時間目安は
Safari中心25〜40分、アクセシビティ系設定で約15分です。
AppleシリコンMac miniは、WebKitの色彩議論を終わらせる現実解です：統合メモリでブラウザとローカル処理を同居させやすく、長時間の目視レビューでもサーマルが読みやすいです。MacHTMLはSSH/VNC付きのクラウドMac miniを提供し、OKLCHとdisplay-p3の本番相当検証を短期レンタルで回せます。スプリント単位で立ち上げ、証跡を残し、緑になったら解放する運用がキャップエックス増を避けます。