ハイコントラストダークテーマのデザイン

ハイコントラストダークテーマの構築

ハイコントラストダークテーマは、WCAG AAA準拠（通常テキストで7:1）を目標としつつ、極端なコントラストによる目の疲れを避けます。背景、サーフェス、テキストの色を慎重に選択する必要があります。

ハレーション問題

純白（#ffffff）テキストを純黒（#000000）上に配置するとコントラスト比は21:1になりますが、乱視を持つユーザー（人口の約50%）にハレーションと呼ばれる視覚的アーティファクトを引き起こします。明るい白テキストが光り、黒い背景ににじんで見え、読みにくくなります。

推奨カラースケール

:root {
  /* 背景レイヤー */
  --bg-base: #0a0a0b;     /* 最も深い背景 */
  --bg-surface: #141415;  /* カード/パネル背景 */
  --bg-elevated: #1e1e20; /* モーダル、ドロップダウン */

  /* テキスト色 */
  --text-primary: #e4e4e7;   /* baseに対して15.39:1 - AAA */
  --text-secondary: #a1a1aa; /* baseに対して7.41:1 - AAA */
  --text-tertiary: #71717a;  /* baseに対して4.30:1 - AAのみ */

  /* ボーダー */
  --border-default: #27272a; /* baseに対して2.08:1 */
  --border-strong: #3f3f46;  /* baseに対して3.22:1 */
}

コントラストマトリックス

要素	色	vs #0a0a0b	vs #141415	WCAG
プライマリテキスト	#e4e4e7	15.39:1	12.96:1	AAA
セカンダリテキスト	#a1a1aa	7.41:1	6.24:1	AAA / AA
ターシャリテキスト	#71717a	4.30:1	3.62:1	AA / 大テキスト
リンク	#60a5fa	6.61:1	5.56:1	AA

快適さのためのヒント

1. プライマリテキストにオフホワイトを使用：#ffffffの代わりに#e4e4e7（zinc-200）
2. 背景をレイヤー化：カードにわずかに明るいサーフェス（#141415）を使用して、ボーダーだけに頼らず深度を作成
3. 純白を制限：フォーカスされた要素や高強調ボタンに#ffffffを予約
4. 実際の画面でテスト：ダークモードのコントラストはモニタータイプ（OLED vs LCD）間で大きく異なる場合がある