選択中のテーブル行は何色がいい？操作状態を伝えるUIカラー

請求書をまとめてCSVに出力する管理画面では、どのテーブル行を選んだか一目で確認できることが大切です。行全体の色を変えるだけでは、マウスを重ねた行やキーボードで操作している行との違いが分かりにくくなることがあります。ここでは4件の請求書から2件を選ぶ例を使い、選択中の背景色・チェック表示・輪郭の役割を整理します。

選択中の行は淡い背景色と、はっきりした選択の目印で示す

テーブルとは、行と列に情報を並べた表です。ここでの「選択」は、後でまとめて出力する対象に行を加える操作を指します。「ホバー」はマウスのポインターを重ねた状態、「フォーカス」はキーボード操作の対象になっている状態で、選択済みかどうかとは別です。ポインターを外しても選択は残り、フォーカスが別の行へ動いても選択が消えないことを、表示で分かるようにします。

選択していない行の背景を白■#FFFFFFにし、選択した行を淡い青紫■#EEF2FFにするのは一案です。ただし両者のコントラスト比（相対的な明るさの差）は約1.12:1しかありません。淡い色は表全体を落ち着いて見せられますが、色の塗り分けだけで選択を示すには不十分です。「☑ 選択中」という文字とチェック印、選択行の左側の線などを組み合わせましょう。

WCAG 2.2（Web Content Accessibility Guidelines：WEBコンテンツを利用しやすくするための国際的な指針）では、色だけを情報の唯一の手がかりにしないことが求められます。通常サイズの文字は背景との比率が原則4.5:1以上、状態を示すチェックや必要な輪郭などは隣接する色と原則3:1以上が基準です。文字と操作の目印は別々に確かめます。

請求書4件から2行を選ぶ画面の具体的な配色

ページを淡い青灰色■#F8FAFC、表の通常行を白■#FFFFFF、請求書番号や金額を濃いグレー■#1F2937にします。文字と白の比率は約14.68:1です。選択した行を淡い青紫■#EEF2FFに変更しても、この濃い文字■#1F2937なら約13.13:1を確保できます。補足文字の青灰色■#475569も、白■#FFFFFFとは約7.58:1、選択行■#EEF2FFとは約6.78:1です。

選択中の行には、濃い紫■#4338CAの左線と、深い紫■#312E81による「☑ 選択中」を加えます。左線と選択行の淡い背景■#EEF2FFは約7.07:1、左線と白い行■#FFFFFFは約7.90:1です。「選択中」の文字■#312E81は淡い背景■#EEF2FFと約10.22:1あります。実際のチェックボックスを濃い紫■#4338CAで塗る場合、白いチェック印■#FFFFFFとの比率は約7.90:1です。

未選択のチェックボックスは、白■#FFFFFFに青灰色■#64748Bの輪郭を付ける例があり、両者は約4.76:1です。色を増やすのではなく、チェックの有無を主な区別にします。HEXは色を16進数で指定するカラーコードです。

次の表は説明用の表示例です。実際に操作できるチェックボックスではなく、選択状態を文字で示しています。INV-1041の48,000円とINV-1043の52,000円を選ぶと、上部に「2件選択中・合計100,000円」と表示する設計です。

ホバー・フォーカス・一括操作の違いも確認する

未選択の行にマウスを重ねたときだけ薄いグレー■#F1F5F9にする場合、通常の白■#FFFFFFとの差は約1.10:1です。ホバーは一時的な位置の目印で、選択確定の意味にはしません。選択中の淡い青紫■#EEF2FFは維持したまま、キーボードのフォーカスには別の濃い青緑■#0F766Eの輪郭を表示します。この輪郭は選択行■#EEF2FFと約4.89:1、未選択の白■#FFFFFFと約5.47:1、ホバーの薄いグレー■#F1F5F9とも約5.00:1あります。

一括操作の「選択した請求書をCSV出力」ボタンには青■#1D4ED8の背景と白文字■#FFFFFFを使う例があり、文字の比率は約6.70:1、ページ背景■#F8FAFCとの比率は約6.41:1です。ボタンの近くに「2件選択中」を残し、出力対象が明確に分かるようにします。「全件選択」が表示中のページだけを対象にするのか、すべての検索結果を含むのかも文章で区別してください。

実際のWEB画面では各行のチェックボックスに請求書番号を関連付け、Tabキーで移動し、Spaceキーで選択を切り替えられるようにします。高度な操作を持つグリッド（キーボードでセル間を移動する表形式のUI）では、WAI-ARIA（支援技術へ部品の意味や状態を伝える仕様）の選択状態も正しく実装します。単なるHTMLの表に、見た目だけで不要なグリッドの役割を付けないようにします。

並べ替えやページ送りの後も選択を維持する設計なら、対象件数と請求書番号の対応を更新して知らせます。スマートフォンでも選択操作、請求書番号、金額が離れないようにします。HueRollではHEXコードで色を選び、選択色と白・黒とのコントラストを確認できます。ただし任意の2色同士の比較やAA・AAAの自動判定はできません。今回の選択行・輪郭・文字の組み合わせは別途計算した値です。