ダークモードのテキストコントラストガイドライン

ダークモードのアクセシビリティ

ダークモードはモダンなウェブアプリケーションで標準になりましたが、独特のコントラストの課題があります。白背景でうまく機能する色が暗い背景では不合格になることがあり、逆も同様です。

暗い背景色とテキストのペア

/* 一般的な暗い背景とアクセシブルなテキスト */
/* Tailwind zinc-900背景 */
background: #18181b;
color: #fafafa;  /* zinc-50: 18.42:1 - AAA合格 */
color: #e4e4e7;  /* zinc-200: 13.48:1 - AAA合格 */
color: #a1a1aa;  /* zinc-400: 6.48:1 - AA合格、AAA不合格 */
color: #71717a;  /* zinc-500: 3.76:1 - AA通常不合格 */

/* Tailwind slate-900背景 */
background: #0f172a;
color: #f8fafc;  /* slate-50: 18.31:1 - AAA合格 */
color: #94a3b8;  /* slate-400: 6.48:1 - AA合格 */
color: #64748b;  /* slate-500: 3.83:1 - AA通常不合格 */

よくあるダークモードの間違い

1. 純白テキストに純黒背景を使用：コントラストは21:1（最大）ですが、「ハレーション」という目の疲れを引き起こし、明るい白テキストが暗い背景ににじんで見えます。代わりにオフホワイト（#e4e4e7）をダークグレー（#18181b）に使用してください。

2. ライトモードのグレーを再利用：白背景で良好な副次テキストコントラストを提供するグレー（#6b7280など）は、暗い背景では完全に不合格になる可能性があります。

3. 暗い背景に彩度の高いテキスト：明るい赤や緑などの彩度の高い色は鮮やかに見えますが、コントラストチェックに不合格になることがあります。

推奨アプローチ

目的	ライトモード	ダークモード
プライマリテキスト	#18181b on #ffffff	#fafafa on #18181b
セカンダリテキスト	#71717a on #ffffff	#a1a1aa on #18181b
無効テキスト	#a1a1aa on #ffffff	#52525b on #18181b

両モードのテスト

ライトモードとダークモードの両方でコントラスト比を常に確認してください。デザイントークンシステムは、セマンティックカラー名（例：--text-primary）をテーマごとに異なる値にマッピングすることで、テーマ間でアクセシブルなコントラストを維持するのに役立ちます。