見出しのアクセシブルなカラー階層

カラー階層の構築

タイポグラフィ階層は、サイズ、ウェイト、色を使って重要度を示します。重要度の低いテキストに明るい色を使用するのは一般的なパターンですが、各レベルがWCAGコントラスト要件を満たす必要があります。

白背景の階層パターン

/* 強調度が下がる見出しレベル */
h1 {
  color: #0f172a;   /* slate-900: 白に対して17.58:1 - AAA */
  font-size: 36px;
  font-weight: 800;
}

h2 {
  color: #1e293b;   /* slate-800: 白に対して14.14:1 - AAA */
  font-size: 30px;
  font-weight: 700;
}

h3 {
  color: #334155;   /* slate-700: 白に対して10.26:1 - AAA */
  font-size: 24px;  /* 大テキスト：3:1が必要 */
  font-weight: 600;
}

body {
  color: #475569;   /* slate-600: 白に対して7.09:1 - AAA */
  font-size: 16px;
  font-weight: 400;
}

.text-muted {
  color: #64748b;   /* slate-500: 白に対して4.88:1 - AA */
  font-size: 14px;
}

.text-caption {
  color: #94a3b8;   /* slate-400: 白に対して3.15:1 */
  font-size: 12px;
  /* 注意：通常テキストのAAに不合格 */
}

ミュートテキストの罠

デザイナーはキャプション、タイムスタンプ、メタデータに非常に薄い「ミュート」テキスト色を使いたがります。しかし、白背景で約#767676（コントラスト4.54:1）より薄いテキストは通常テキストのAAに不合格です。解決策：

1. 許容される最も暗いグレーを受け入れる：#6b7280（gray-500）で5.03:1
2. フォントサイズを大きくする：テキストが18px太字または24px通常なら3:1のみ必要
3. ウェイトを差別化要素として使用：同じ色でフォントウェイトを下げる

暗い背景の階層

/* #0f172aのダークモード階層 */
h1 { color: #f8fafc; }  /* slate-50: 18.31:1 - AAA */
h2 { color: #f1f5f9; }  /* slate-100: 16.56:1 - AAA */
h3 { color: #e2e8f0; }  /* slate-200: 13.90:1 - AAA */
body { color: #cbd5e1; } /* slate-300: 10.35:1 - AAA */
.text-muted { color: #94a3b8; } /* slate-400: 6.48:1 - AA */

一貫性の維持

CSSカスタムプロパティまたはデザイントークンを使用して、ページ間で階層の一貫性を確保してください。生の色値を使用する代わりに、各レベルを--text-heading、--text-body、--text-mutedなどのセマンティック名にマッピングしてください。