WEBサイトの表に色を付ける方法｜行と列を見分けやすくする配色

WEBサイトの表に色を付けると、見出し行や項目名、注目してほしい列を見つけやすくできます。ただし、行や列の意味を色だけで伝えると、色の違いを見分けにくい利用者には構造が分かりにくくなります。基本はHTMLで表の関係を正しく示したうえで、背景色や文字色を視覚的な補助として使うことです。ここでは、白を基調にした表へ見出し行・項目列・注目列の3段階で色を加える例を考えます。

色より先に、行見出しと列見出しの構造を決める

表の見出しは、見た目を太字や背景色にするだけでなく、HTMLの <th> を使って見出しセルとして示します。列見出しなら scope="col"、行見出しなら scope="row" を使うと、どのデータと関係する見出しかを分かりやすくできます。W3CのTables Tutorialでも、見出しセルとデータセルの関係を構造として示すことが重要とされています。

つまり、色は「ここが見出し」「ここが注目列」と伝える唯一の方法にはしません。列名や行名の文字、見出しセルの構造を残したうえで、背景色を使って視線を整理します。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2でも、色を情報伝達の唯一の手段にしないことが求められます。

見出し行・項目列・注目列で色の強さを分ける

本文セルは白 ■#FFFFFF、文字はダークブルーグレー ■#334155 を基本にすると、コントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は約10.35:1です。列見出しの背景をライトブルーグレー ■#E2E8F0 に変え、文字を同じ ■#334155 にすると約8.40:1です。

左端の項目名を行見出しとして見つけやすくしたい場合は、背景をオフホワイトに近いグレー ■#F8FAFC、文字を ■#334155 にすると約9.90:1です。本文の白 ■#FFFFFF と大きく離れないため、表全体のまとまりを保ちながら項目列を区別できます。

料金表などで「おすすめプラン」の列を補助的に目立たせたい場合は、その列の背景をペールブルー ■#EFF6FF、見出しや重要な文字をダークブルー ■#1E3A8A にすると約9.52:1です。ただし、青い背景だけで「おすすめ」を表さず、「おすすめ」の文字ラベルや見出しも付けます。

色数を増やしすぎず、状態色と表の整理色を分ける

表の行や列ごとに別の色を付けると、どの色にどの意味があるのか覚えにくくなります。見出し行、項目列、注目列のように役割を限定し、それ以外は白 ■#FFFFFF を基本にすると整理しやすくなります。選択中の行、エラー、成功などの状態表示がある場合は、表を整理する背景色と同じ色にせず、ラベルやアイコン、枠線など別の手掛かりも併用します。

WCAG 2.2では、通常サイズの文字は背景とのコントラスト比4.5:1以上、大きな文字は3:1以上が基準です。表の背景色を変えたときは、見出し・本文・注釈など実際に載る文字をそれぞれの背景で確認します。また、スマホ表示で表を横スクロールやカード形式に変える場合も、行見出しと列見出しの関係が分からなくならないようにします。

HueRollでは、候補色を3桁または6桁のHEX（Webで色を表す16進数コード）やカラーピッカーで調整し、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していないため、表の背景・文字・注目列など、実際に隣接する組み合わせは別途確認します。