配色の科学：コントラスト比と可読性を両立する実践レシピ

By /

「きれい」だけでは戦えません。読める・伝わる・押したくなるを同時に満たすために、**コントラスト比（可読性）とブランドらしさ（審美）**を両立させる“設計手順”を、数式→ツール不要の運用ルール→WordPress実装まで一直線にまとめます。

目次

  1. なぜコントラストが“勝敗”を分けるのか
  2. 基礎理論：相対輝度とコントラスト比（式と合格基準）
  3. 配色設計の全体フレーム（Base / Surface / Text / Accent）
  4. 実践レシピ①：本文・見出し・UIの安全ラインを一発で決める
  5. 実践レシピ②：ブランド色を押せるCTA色に仕立てる（OKLCH活用）
  6. 実践レシピ③：写真や動画の上の文字を“必ず読ませる”
  7. 実践レシピ④：状態色（成功/警告/危険）を混線させない
  8. 実践レシピ⑤：ダークモードで“逆転現象”を起こさない
  9. グラフ・図表の配色（色覚多様性＆白黒印刷にも強い）
  10. WordPress実装：theme.json＋CSSトークンで崩れない配色
  11. チェックリスト（公開前に30秒で点検）
  12. まとめ：色は“運用の仕組み”で勝つ

1. なぜコントラストが“勝敗”を分けるのか

  • 読めない＝存在しない。読了率・CVR・離脱率は、まず文字の読みやすさで決まります。
  • コントラストが低いと、判断時間が伸びる→直帰や誤操作に直結。
  • 一方で、高コントラストに寄せすぎると眩しさ/疲労の副作用が出る。文脈別の最適解を持つことがプロの設計です。

2. 基礎理論：相対輝度とコントラスト比（式と合格基準）

目安（WCAGの実運用で覚えるライン）

  • 本文（通常サイズ）：4.5:1 以上（AA）／7:1 以上（AAA目安）
  • 大きな文字（太字14pt以上 or 18pt以上）：3:1 以上
  • UI部品/アイコン/グラフの重要線：3:1 以上

現場では 本文=4.5:1以上、CTA文字=4.5:1以上、サブラベル=3:1以上を“赤本”として固定すると迷いません。

3. 配色設計の全体フレーム（Base / Surface / Text / Accent）

  • Base：ページ背景（例：#FFF / #0B0F1A）
  • Surface：カード/モーダルなどの面の色（Baseと段差を付ける）
  • Text：本文・見出し・サブテキスト
  • Accent：CTA・リンク・強調（唯一無二の運用）

先に文字色トークンを決め、背景側を調整するのがコツ。
例：--text: #0f172a; --muted: #475569; --on-primary: #ffffff; など。

4. 実践レシピ①：本文・見出し・UIの安全ラインを一発で決める

① 文字トークンを固定

  • 本文：--text: #0f172a（濃紺寄りの黒で疲れにくい）
  • サブ：--muted: #475569（本文とコントラストは3:1以上）
  • 反転文字：--on-surface: #ffffff（暗い面の上の文字）

② 背景を合わせる（明モード例）

  • Base：#ffffff（白）→ 本文コントラスト ≈ 12:1
  • Surface：#f8fafc（やや明るい）→ 本文コントラスト ≈ 10:1

③ CTA（主ボタン）

  • 背景：--primary: #0ea5e9（明るいシアン）
  • 文字：必ず白 --on-primary: #ffffff
  • 確認：#0ea5e9 vs #ffffff → コントラスト ≈ 3.1:1（大文字なら最低到達、通常文字なら濃いめの主色へ調整推奨）
    • 改善案：--primary: #0284c7（やや濃く）だと #fff と ≈ 4.7:1 → 本文サイズでも合格。

ルール：「主色は“白文字で 4.5:1 以上”を満たす濃さにする」。薄いブランド色は面で使い、テキスト色は別トークンを用意。

5. 実践レシピ②：ブランド色を押せるCTA色に仕立てる（OKLCH活用）

HSLより**OKLCH（知覚均等色空間）**で「明るさ（L）」「色の強さ（C）」「色相（h）」を直接コントロールすると、見た目の差が直感的に扱えます。

手順（明モードで白文字を乗せたい場合）

  1. ブランド色を OKLCH に変換（例：oklch(0.72 0.14 230)）
  2. L（明度）を下げる：0.72 → 0.6 前後
  3. C（彩度）は軽く上げる：0.14 → 0.16（くすみ回避）
  4. --primary をこれに設定。--on-primary は #fff 固定
  5. 比を測る：contrast(primary, #fff) >= 4.5

CSS例（モダンブラウザ）

:root {
  --primary: oklch(0.60 0.16 230);
  --on-primary: #fff;
}
.btn--primary { background: var(--primary); color: var(--on-primary); }

ダークモードでは逆。Lを上げて（明るく）背景との差を作る。oklch(0.80 0.08 230) など。

6. 実践レシピ③：写真や動画の上の文字を“必ず読ませる”

失敗の原因

  • 背景の局所コントラストが激しく、同じテキストでも場所により読めたり読めなかったりする。

解法（順守ルール）

  1. スクラム（半透明の被せ）：黒 or 白の単色レイヤを**40–64%**で被せる
  2. グラデーションスクラム：下部ほど濃くしてテキスト領域を確保
  3. テキスト陰影は最小限（ぼかしすぎると逆効果）
  4. 撮影/選定段階で“情報が少ない面”を確保
.hero::before{
  content:""; position:absolute; inset:0;
  background: color-mix(in oklab, #000 50%, transparent); /* 約50%黒 */
}
.hero__title{ color:#fff; }

7. 実践レシピ④：状態色（成功/警告/危険）を混線させない

原則

  • 色だけに頼らない（アイコン・テキストも必ず添える）
  • 各状態に対テキスト色を固定（白 or 濃色）

トークン例（明モード）

  • Success：面 #10b981（on:#fff ≈ 4.8:1）
  • Warning：面 #f59e0b（on:#212121 ≈ 6+:1）→ 白文字は不足しやすい
  • Danger：面 #ef4444（on:#fff ≈ 4.6:1）
.alert--success { background:#10b981; color:#fff; }
.alert--warning { background:#f59e0b; color:#212121; } /* 白文字は不可 */
.alert--danger  { background:#ef4444; color:#fff; }

8. 実践レシピ⑤：ダークモードで“逆転現象”を起こさない

よくある崩れ

  • 背景を暗くしたのに、テキストがまっ白で眩しい／彩色が蛍光に見える。

対策

  • 本文色は純白を避けて #EDEFF3 前後（OKLCHで L≈0.93）
  • 彩色は彩度を下げる（C を明モードの 70–85% 目安）
  • 境界線は明度差で付ける（影より“線”）
  • 深い黒よりやや持ち上げた黒（例：#0b1020）で目の疲れを抑制
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b1020;
    --surface: #121831;
    --text: #EDEFF3;
    --muted: #B6C0D0;
    --primary: oklch(0.78 0.09 230); /* 明るめ＆低彩度 */
  }
}

9. グラフ・図表の配色（色覚多様性＆白黒印刷にも強い）

原則

  • 色＋形の二重表現：折れ線は線種/マーカーも変える。棒はパターン塗り。
  • 赤×緑の対比は避け、青/橙/紫/緑の離れた色相にする。
  • 1本の線だけを強調：主系列は太く・他は薄く灰色に。

実戦パレット（安全寄り）

  • 青 #1f77b4 / 橙 #ff7f0e / 緑 #2ca02c / 紫 #9467bd / 赤 #d62728（必要に応じて明度差で調整）

重要注記や閾値ラインはコントラスト3:1以上の濃度で。

10. WordPress実装：theme.json＋CSSトークンで崩れない配色

theme.json（抜粋）

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        {"slug":"bg","name":"Background","color":"#ffffff"},
        {"slug":"surface","name":"Surface","color":"#f8fafc"},
        {"slug":"text","name":"Text","color":"#0f172a"},
        {"slug":"muted","name":"Muted","color":"#475569"},
        {"slug":"primary","name":"Primary","color":"#0284c7"},
        {"slug":"danger","name":"Danger","color":"#ef4444"},
        {"slug":"warning","name":"Warning","color":"#f59e0b"},
        {"slug":"success","name":"Success","color":"#10b981"}
      ]
    },
    "typography": { "lineHeight": { "paragraph":"1.6" } }
  },
  "styles": {
    "color": { "background":"var(--wp--preset--color--bg)", "text":"var(--wp--preset--color--text)" },
    "elements": {
      "button": {
        "color": { "text":"#fff", "background":"var(--wp--preset--color--primary)" },
        "border": { "radius":"12px" }
      }
    }
  }
}

CSSトークン（状態別の“対テキスト色”を固定）

:root{
  --bg:#fff; --surface:#f8fafc; --text:#0f172a; --muted:#475569;
  --primary:#0284c7; --on-primary:#fff;
  --danger:#ef4444; --on-danger:#fff;
  --warning:#f59e0b; --on-warning:#212121;
  --success:#10b981; --on-success:#fff;
}
.btn--primary{ background:var(--primary); color:var(--on-primary); }
.alert--warning{ background:var(--warning); color:var(--on-warning); }

運用ルール：「新しい色を増やさない」。既存トークンの組合せだけで作る。ブロックエディタでも同じ色名を選ばせることで、編集者の事故を防げます。

11. チェックリスト（公開前に30秒で点検）

  • 本文×背景 4.5:1 以上／見出しはサイズに応じて3:1 以上
  • 主CTAの文字色は4.5:1 以上（ブランド色が薄いなら濃色変種を用意）
  • サブテキストは3:1 以上（読まれない灰色はNG）
  • 状態色は色以外の手掛かり（アイコン/見出し語）を必ず併用
  • 写真上の文字はスクラム（単色またはグラデ）で局所コントラストを整える
  • ダークモードは純白禁止・彩度控えめ
  • 図表は色＋形の二重表現、強調1本だけ濃く
  • theme.jsonのパレット外の色を使っていない

12. まとめ：色は“運用の仕組み”で勝つ

  • まず文字トークンを決め、背景や面を合わせる。
  • ブランド色はOKLCHで濃度を調整し、白文字4.5:1以上を満たす。薄色は“面”で使う。
  • 写真上はスクラム、状態色は色×アイコン、図表は色×形。
  • WordPressは**theme.json＋トークン**で“編集しても崩れない”を標準化。

このままテーマ名（Astra / SWELL / ほか）を教えてくれたら、そのテーマに最適化したtheme.jsonとCSS断片に落としてお渡しします。ブランドカラー（#値）を1ついただければ、合格ラインを満たすCTA色の候補もすぐに算出します。

関連投稿

上部へスクロール