コントラスト比が全てを決める
ダークモードの成功は、配色にあります。単に背景を黒くして文字を白くするだけじゃ不十分なんです。実際、多くのデザイナーがここで失敗してます。
正しいコントラスト比を理解することが、ユーザーにとって快適で、かつWCAGアクセシビリティ基準をクリアしたUIを作る基本になります。
WCAG基準を知る
WCAG 2.1では、通常テキストに対して最低でも4.5:1のコントラスト比が必要とされてます。大きなテキスト（18pt以上）でも3:1必要です。
AAレベル（推奨）
4.5:1（通常テキスト）
ほぼ全てのユーザーが読める
AAAレベル（最高）
7:1（通常テキスト）
視力が低い人にも対応
実装の3つのステップ
-
1
背景色を選ぶ
#0f172a#1e293bの深い紺色系が推奨です。完全な黒（#000000）は実は目が疲れやすいんです。
-
2
テキスト色を決める
メインテキストは#ffffff、副テキストは#cbd5e1、ミュート色は#94a3b8。各階層で明確に分けることが大事です。
-
3
ツールで検証する
WebAIMやColorHexa、Stark（Figmaプラグイン）などを使ってコントラスト比を測定しましょう。推測は危険です。
京都スタジオ向け推奨パレット
映像制作スタジオの環境を考慮した、実装済みの配色セットです。これらはCSS変数として運用できます。
背景（プライマリ）
#0f172a
最も深い色。ヘッダーやフッター
背景（セカンダリ）
#1e293b
メインコンテンツエリア
テキスト（プライマリ）
#ffffff
見出し、重要な情報
アクセント色
#f97316
ボタン、リンク
よくある失敗パターン
実装時によく見かける間違いを挙げます。これを避けるだけで、グッと品質が上がります。
-
完全な黒背景を使う
#000000は目が疲れやすく、文字も浮いて見えます。必ず深い紺色（#0f172a#1a202c）を使いましょう。
-
淡いグレーテキストを多用
見出しや重要な情報は白色（#ffffff）にしないと、ユーザーが見落とします。淡いグレーは補助情報だけ。
-
検証なしで公開
目測でOK判定は危険です。WebAIMなどのツールで必ずコントラスト比を測ってから実装を完了させてください。
まとめ：配色は戦略
ダークモードUIの配色は、単なる見た目の問題じゃありません。ユーザーの目の疲れを減らし、長時間の使用を快適にする配慮です。WCAG基準を意識しながら、自分のプロジェクトに合った配色セットを作ってください。
京都のスタジオ環境で映像制作をしていると、編集作業は夜間や薄暗い環境で行われることが多いです。そういった現場こそ、正しいダークモード配色が活躍します。今回紹介したパレットを出発点に、プロジェクトに合わせてカスタマイズしていくといいでしょう。
免責事項
本記事で紹介した配色やコントラスト比の基準は、WCAG 2.1ガイドラインに基づいています。ただし、実装の詳細や具体的なプロジェクト要件については、実際の使用環境でテストを行い、ユーザーの視認性を確認することをお勧めします。色覚特性の多様性を考慮して、複数の検証ツールを使用することが重要です。