Webデザインの配色は長らく「センスと勘」で決めるものだった。だが2026年、色の作り方・混ぜ方・検証の仕方はどれも数値で扱えるロジックに置き換わりつつある。今日は基礎に立ち返り、知覚均等な色空間OKLCH、コントラストの新基準APCA、そしてAIパレット生成ツールを組み合わせた、2026年のアクセシブルな配色設計の考え方を整理する。
なぜ配色が「ロジック」に向かうのか
HEXやRGBで色を扱う限り、同じ「明るさ」に見える色を数値だけで作るのは難しい。赤と青と黄色を同じ明度で並べたつもりが、実際には黄色だけ眩しく見える——という経験は誰にでもあるはずだ。この知覚のズレを解消するために生まれたのが、Björn Ottosson氏が2020年に発表したOklab色空間と、その円柱座標系であるOKLCHだ。
OKLCHとcolor-mix()——色を「壊さず」動かす
OKLCHは明度(Lightness)・彩度(Chroma)・色相(Hue)の3値で色を指定する。最大の利点は、Lightnessを固定したまま色相だけを変えても、見た目の明るさが揃うこと。ダークモード用の派生色やホバー時の変化色を、感覚に頼らず機械的に生成できる。
2026年半ばの時点でOKLCHは主要ブラウザの87%以上でサポートされ、実運用レベルの技術になっている。あわせて使いたいのがcolor-mix()と相対カラー構文（Relative Color Syntax）だ。color-mix(in oklch, var(--brand) 80%, white)のように書けば、既存の色を起点にホバー色やボーダー色を式で生成できる。両方とも2026年時点で全主要ブラウザが対応する「Baseline Widely Available」の機能なので、デザイントークンを手作業で量産する必要はもうない。
OKLCHベースのカラースケール設計の流れ
- ブランドカラー1色をOKLCHで指定する(
oklch(62% 0.19 250)のような形式) - 同じChroma・Hueのまま、Lightnessだけを段階的に変えて11段階程度のスケールを作る
color-mix()でグレーやホワイトと混ぜ、ホバー・無効化・ダークモード用の派生色を導出する- 最後に各組み合わせのコントラストを検証する(次章)
コントラストの新基準「APCA」とWCAG 2.2の違い
配色設計で避けて通れないのがコントラスト、つまり文字と背景の読みやすさの検証だ。現行のWCAG 2.2は本文4.5:1・大きな文字3:1という比率ベースの基準を使うが、これは「白背景に黒文字」を基準に設計されたアルゴリズムで、暗い背景に明るい文字を置く場合など、実際の見え方とズレが生じやすいという指摘が以前からあった。
そこで登場したのが、Andrew Somers氏(Myndex Research)が開発したAPCA（Accessible Perceptual Contrast Algorithm）だ。APCAは背景と文字色の知覚的な明度差を「Lc値」(およそ±106の範囲)で表し、フォントサイズや太さに応じて必要なコントラストを変える。大きく太い文字は小さい文字より低いコントラストでも読めるという、人間の知覚特性を反映した設計になっている。
ただし2026年時点でAPCAはWCAG 3の草案から一時的に外れており、W3Cとしての正式な位置づけは未確定だ。実務では「現行の準拠基準はWCAG 2.2のまま維持しつつ、デザインシステムを刷新するタイミングでAPCAも並行してテストしておく」というのが現実的な線になる。
| 基準 | 単位 | 目安 | 2026年の位置づけ |
|---|---|---|---|
| WCAG 2.2 | コントラスト比 | 本文4.5:1 / 大きな文字3:1 | 現行の正式な準拠基準 |
| APCA | Lc値(±106) | 本文Lc60前後が目安 | WCAG 3の草案から一時除外、先行導入が進む |
AIパレット生成ツールで“たたき台”を速く作る
ゼロから配色を組むのではなく、AIに候補を出させてから調整する流れも定着してきた。代表的なツールを挙げる。
| ツール | 特徴 |
|---|---|
| Huemint | どの色が背景・前景・アクセントかを理解した機械学習モデルで配色を生成。色をロックして再生成でき、CSS変数やJSONで書き出せる |
| Coolors | スペースキーで高速に配色案を切り替えられる定番ツール。AIモードも搭載 |
| Adobe Color | 単色の組み合わせだけでなくパレット全体のコントラストチェックも可能 |
| Accessible Palette Studio | OKLCHの11段階スケール生成、APCAによる採点、色覚多様性シミュレーション、Tailwind/Figma向けの書き出しまで一括対応 |
特にAccessible Palette Studioのように「OKLCHで作る→APCAで採点する→デザインシステムの形式で書き出す」までを一気通貫でやってくれるツールは、今日紹介した考え方をそのまま実装に落とし込める点で実務向きだ。
今日から使える配色チェックリスト
- ブランドカラーはHEXではなくOKLCHで管理し、派生色は
color-mix()や相対カラー構文で式にする - 本文と背景の組み合わせはWCAG 2.2の4.5:1を最低ラインとしつつ、余裕があればAPCAでも確認する
- 配色のたたき台はAIツールに出させ、最終調整と検証は人が行う
- 色覚多様性シミュレーションを1回はかけて、色だけに依存した情報伝達がないか確認する
主な情報源
- Oklab color space – Wikipedia
- color-mix() – MDN Web Docs
- Accurate Contrast Using the APCA – Myndex
- WCAG3 Contrast as of April 2026 – Adrian Roselli
- Accessible Color Palette Generator – Accessibility.build
- Huemint – AI color palette generator
各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。