選択状態を色だけに頼らず表現する方法｜WEB UIの基本

TIPS

WEB画面で2つの選択肢から1つを選ぶとき、選択したカードの背景色だけを変えていませんか。色の違いに気づきにくい環境では、どちらが選択中なのか分からなくなることがあります。色に加えて、ラジオボタンの印や「選択中」という文字を示せば、違いをより明確に伝えられます。今回は予約確認の受け取り方法を選ぶUIを使い、見た目とキーボード操作の両方から考えます。

選択状態は色だけでなく形と文字でも伝える

WCAG 2.2（WEBコンテンツを利用しやすくするためのガイドライン）の「Use of Color」は、情報や状態を色だけで伝えないことを求めるレベルAの基準です。例えば選択したカードを薄緑#ECFDF5、未選択を白#FFFFFFに変えるだけでは、背景同士のコントラスト比も約1.05:1しかなく、違いを見失うことがあります。コントラスト比は、隣り合う色の相対的な明るさの差を示す数値です。

そこで今回のUIでは、標準のラジオボタンが持つ選択済みの丸印に加えて、選ばれたカードだけに「✓ 選択中」を表示します。カードの枠線と背景色も変えますが、それらは補助です。ラジオボタンは同じnameでグループにすると1つだけ選べ、選択状態もブラウザーや支援技術に伝わります。

グループにはfieldset、質問文にはlegendを使います。これは関連する選択肢をまとめ、何について選んでいるかを示すHTML（WEBページの内容と構造を表す記述）の仕組みです。単に色付きのdivをクリック可能にしただけでは、ラジオボタンと同じ操作や状態通知は自動的には得られません。

「予約確認の受け取り方法」を2択カードで作る例

予約サービスで「メールで受け取る」と「マイページで確認する」を選ぶ画面を想定します。領域全体は薄い青灰色#F8FAFC、未選択カードは白#FFFFFF、選択済みカードは淡い緑#ECFDF5です。文字には濃い青灰色#1F2937、補足文にはグレー#475569を使います。未選択の枠線はグレー#64748B、選択時は青緑#0F766Eに変更します。「✓ 選択中」の文字には濃い緑#065F46を使い、キーボードのフォーカス枠線は青#1D4ED8に分けます。

<fieldset class="receipt-methods">
  <legend>予約確認の受け取り方法</legend>
  <p>希望する方法を1つ選んでください。</p>
  <div class="receipt-choice">
    <input type="radio" id="receipt-email"
           name="receipt" value="email" checked>
    <label for="receipt-email">
      <strong>メールで受け取る</strong>
      <span class="receipt-choice__desc">確認内容をメールで受信します。</span>
      <span class="receipt-choice__selected"
            aria-hidden="true">✓ 選択中</span>
    </label>
  </div>
  <div class="receipt-choice">
    <input type="radio" id="receipt-account"
           name="receipt" value="account">
    <label for="receipt-account">
      <strong>マイページで確認する</strong>
      <span class="receipt-choice__desc">サイト内で確認内容を表示します。</span>
      <span class="receipt-choice__selected"
            aria-hidden="true">✓ 選択中</span>
    </label>
  </div>
</fieldset>

.receipt-methods {
  max-width: 36rem;
  padding: 20px;
  border: 0;
  border-radius: 12px;
  background-color: ■#F8FAFC;
  color: ■#1F2937;
}
.receipt-methods legend { font-weight: 700; }
.receipt-choice {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.receipt-choice input[type="radio"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: ■#0F766E;
}
.receipt-choice label {
  display: block;
  padding: 14px 16px;
  border: 2px solid ■#64748B;
  border-radius: 10px;
  background-color: ■#FFFFFF;
  color: ■#1F2937;
}
.receipt-choice__desc {
  display: block;
  margin-top: 4px;
  color: ■#475569;
}
.receipt-choice__selected {
  display: none;
  margin-top: 8px;
  color: ■#065F46;
  font-weight: 700;
}
.receipt-choice input:checked + label {
  border-color: ■#0F766E;
  background-color: ■#ECFDF5;
}
.receipt-choice input:checked + label
  .receipt-choice__selected { display: inline-block; }
.receipt-choice input:focus-visible + label {
  outline: 3px solid ■#1D4ED8;
  outline-offset: 3px;
}

CSS（WEBページの見た目を指定するルール）の:checkedは、ラジオボタンが選択された状態を表します。input:checked + labelで対応するカードの色を変え、その中の「✓ 選択中」を表示します。初期状態ではメール側にcheckedを指定していますが、別の選択肢を選べばチェック印と文字表示も移ります。:focus-visibleはTabキーなどで操作対象になったときの枠線です。

「✓ 選択中」にはaria-hidden="true"を付けています。この補助表示は画面上での分かりやすさを目的とし、支援技術には標準ラジオボタン自身の選択状態を伝えるためです。標準部品をappearance: none;で消したり、aria-checkedを手動で切り替えたりする必要はありません。これは選択の見た目を示す実例であり、予約内容の保存や送信処理は含みません。

文字・枠線・操作状態のコントラストを確かめる

未選択の白背景#FFFFFFと濃い本文色#1F2937のコントラスト比は約14.68:1、選択済み背景#ECFDF5と同じ文字は約13.93:1です。補足文#475569は、白背景と約7.58:1、選択済み背景と約7.19:1になります。「✓ 選択中」の濃い緑#065F46と淡い緑背景#ECFDF5は約7.29:1で、通常サイズの文字に原則必要な4.5:1を上回ります。

未選択の枠線#64748Bと白背景#FFFFFFは約4.76:1、選択済みの枠線#0F766Eと淡い緑背景#ECFDF5は約5.20:1です。キーボード操作時の青い枠線#1D4ED8と領域の薄い青灰色#F8FAFCは約6.41:1、選択済み背景と比べても約6.36:1です。選択状態や操作部品を識別するために必要な図形・枠線には、WCAG 2.2の非テキストコントラスト3:1も確認します。

ただし、これらはCSSで指定した色の計算結果です。ラジオボタンの丸印の描画にはブラウザー差があるため、accent-colorに色を指定しただけで実表示の適合を断定できません。Tabキーや矢印キーで選択を切り替え、丸印・「選択中」の文字・枠線の変化が一致するかを実際の端末で確かめましょう。色を区別できなくても選択中を理解できることが重要です。

HueRollは候補色を探し、選択色と白・黒のコントラストを確認する用途に使えます。一方、任意の2色間の比率やWCAG適合を自動判定する機能はありません。選択前・選択後・フォーカス時の隣接色は、完成した画面で別途検証してください。