ダークモードでもコントラストを保つには？文字と背景の色選び

ライトモードでは読めた文字が、ダークモードに切り替えた途端に背景へ埋もれることがあります。明るい背景を黒に、濃い文字を白に置き換えるだけでは、補足文や入力欄の境界、ボタンの文字まで適切になるとは限りません。大切なのは、切替後に実際に隣り合う文字色と背景色をセットで確認することです。ここではタスク検索カードを例に、色の切替方法とコントラストの測り直し方を説明します。

ダークモードへの切替後は隣り合う2色を測る

コントラスト比とは、前景の文字と背景など、隣接する色の相対的な明るさの差を表す数値です。WCAG 2.2（WEBコンテンツを利用しやすくするためのガイドライン）のレベルAAでは、通常サイズの文字に原則4.5:1以上、条件を満たす大きな文字に3:1以上が必要です。操作に不可欠な入力欄の輪郭や状態表示などは、隣接色との非テキストコントラスト3:1が基準になります。

例えば、明るい画面で補足文字として使っていたグレー■#64748Bを、そのまま暗いカード背景■#1E293Bへ載せると約3.07:1です。入力欄の境界としては用途次第で検討できる差ですが、通常サイズの説明文には4.5:1を満たしません。白文字にすべて変更する必要はなく、文字の役割ごとに背景との明度差を確保することが重要です。

ページ全体の背景と、上に載るカードや入力欄の背景も分けて考えます。暗い背景同士は違いがわずかになることがあるため、情報のまとまりを枠線や余白でも示します。単色のコードだけで画面全体の読みやすさを判定せず、どこにどの色を重ねるかを先に決めましょう。

タスク検索カードをライト・ダークで切り替える配色例

タスク管理サービスの検索カードを、端末の表示設定に合わせて切り替える例です。ライトモードはページ背景を明るい灰色■#F8FAFC、カードを白■#FFFFFF、本文を濃い青灰色■#1E293B、補足文をグレー■#475569にします。検索欄の枠線には■#64748B、一覧へ進むリンク型ボタンには青■#1D4ED8と白文字■#FFFFFFを使います。

ダークモードではページ背景を濃紺■#0F172A、カードをやや明るい青灰色■#1E293Bに変更します。本文には白に近い青灰色■#F1F5F9、補足文には淡いグレー■#CBD5E1を使います。ボタンは明るい青■#93C5FDと濃紺文字■#0F172Aを組み合わせ、検索欄の枠線は淡いグレー■#94A3B8に変えます。明るいボタンに白文字をそのまま残すとコントラストが落ちるため、ボタン文字も一緒に切り替える設計です。

<div class="task-demo">
  <section class="task-card">
    <h3>タスクの確認</h3>
    <p class="task-card__sub">今日の未完了タスクを探せます。</p>
    <label for="task-query">タスク名</label>
    <input id="task-query" name="query" type="search">
    <a class="task-card__action" href="/tasks/">一覧を開く</a>
  </section>
</div>

.task-demo {
  color-scheme: light;
  --page-bg: rgb(248 250 252);
  --surface: rgb(255 255 255);
  --main-text: rgb(30 41 59);
  --sub-text: rgb(71 85 105);
  --control-border: rgb(100 116 139);
  --action-bg: rgb(29 78 216);
  --action-text: rgb(255 255 255);
  --focus-ring: rgb(29 78 216);
  padding: 24px;
  background-color: var(--page-bg);
}
@media (prefers-color-scheme: dark) {
  .task-demo {
    color-scheme: dark;
    --page-bg: rgb(15 23 42);
    --surface: rgb(30 41 59);
    --main-text: rgb(241 245 249);
    --sub-text: rgb(203 213 225);
    --control-border: rgb(148 163 184);
    --action-bg: rgb(147 197 253);
    --action-text: rgb(15 23 42);
    --focus-ring: rgb(253 230 138);
  }
}
.task-card {
  max-width: 34rem;
  padding: 24px;
  border: 2px solid var(--control-border);
  border-radius: 12px;
  background-color: var(--surface);
  color: var(--main-text);
}
.task-card__sub { color: var(--sub-text); }
.task-card label { display: block; margin: 14px 0 6px; }
.task-card input {
  box-sizing: border-box;
  width: 100%;
  padding: 12px;
  border: 2px solid var(--control-border);
  border-radius: 6px;
  background-color: var(--surface);
  color: var(--main-text);
  font: inherit;
}
.task-card__action {
  display: inline-block;
  margin-top: 16px;
  padding: 12px 18px;
  border-radius: 6px;
  background-color: var(--action-bg);
  color: var(--action-text);
  text-decoration: underline;
}
.task-card__action:hover { text-decoration-thickness: 3px; }
.task-card :is(input, .task-card__action):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 4px;
}

@media (prefers-color-scheme: dark)は利用者のOSやブラウザーの暗い表示設定を検出するCSSの条件指定です。--main-textなどはCSS変数（色に名前を付けて再利用する仕組み）で、ライト用とダーク用の値を切り替えています。color-schemeはブラウザー標準の入力部品にも対応モードを伝える補助指定ですが、制作者の独自色を自動ですべて変えるものではありません。この例は見た目のサンプルで、検索処理と手動切替ボタンは含みません。/tasks/は実際のページに変更してください。

補足文字・ボタン・フォーカスを切替後に再確認する

ライトモードでは、白いカード■#FFFFFFに対して本文色■#1E293Bが約14.63:1、補足文字■#475569が約7.58:1です。ボタンの青背景■#1D4ED8と白文字■#FFFFFFは約6.70:1で、通常文字の4.5:1を上回ります。入力枠線■#64748Bと白いカードは約4.76:1です。

ダークモードでは、カード背景■#1E293Bと本文色■#F1F5F9が約13.35:1、補足文字■#CBD5E1が約9.85:1になります。明るい青のボタン背景■#93C5FDと濃紺文字■#0F172Aは約9.90:1です。入力欄の枠線■#94A3B8と暗いカード背景は約5.71:1で、識別に必要な輪郭の3:1を上回ります。

キーボードで操作場所を示すフォーカス枠線は、ライトでは青■#1D4ED8と白いカードの比が約6.70:1、ダークでは淡い黄色■#FDE68Aと暗いカードの比が約11.75:1です。実際の枠線の位置や太さも確認してください。またダークモードのページ背景■#0F172Aとカード背景■#1E293Bの差は約1.22:1と小さいため、この例では区切りをカードの枠線と余白でも示しています。

背景写真や半透明の面を使う場合は、合成後の背景を文字の位置ごとに確認します。スマートフォンやライト・ダーク切替後に入力・リンク・フォーカスを操作し、数値が十分でも細い線や小さな文字が見つけにくくないか確かめましょう。HueRollでは色候補と選択色の白・黒に対するコントラストを確認できますが、任意の2色間の比率やAA・AAAの自動判定には対応していません。完成した画面の隣接色は別途測定します。