比較表の色はどう使う？WEBページで違いを分かりやすく見せる配色

TIPS

比較表では、すべてのセルを色分けするより、「どこが同じで、どこが違うのか」を素早く見つけられることが大切です。背景色を増やしすぎると、比較したい差より色そのものが目立つことがあります。基本は見出しと通常セルをニュートラルな配色にそろえ、差がある項目だけを限定的に強調する方法です。ここでは、2〜3個のサービスや仕様を横並びで比べる表を例に考えます。

比較の基準を文字と表構造で示し、色だけに頼らない

まず、何を比べているのかが色を見なくても分かるようにします。列見出しや行見出しはHTMLの <th> を使い、必要に応じて scope="col" や scope="row" でデータとの関係を示します。W3CのTables Tutorialでも、見出しセルとデータセルの関係を構造として示すことが重要とされています。

また、「対応」「非対応」「差あり」などの意味を背景色だけで伝えず、文字や記号も残します。たとえば「✓ 対応」「— 非対応」「差あり」のように表示すれば、色の違いを見分けにくい場合でも内容を理解できます。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2でも、色を情報伝達の唯一の手段にしないことが求められます。

通常セルはニュートラルにし、違いがあるセルだけを強調する

表全体の基本色は、本文セルを白 ■#FFFFFF、文字をダークブルーグレー ■#334155 にすると、コントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は約10.35:1です。列見出しはライトブルーグレー ■#F1F5F9 と ■#334155 の組み合わせで約9.45:1です。

差がある項目だけを見つけやすくしたい場合は、対象セルの背景をペールオレンジ ■#FFF7ED、文字をダークオレンジ ■#9A3412 にする例があります。この組み合わせは約6.88:1です。「差あり」「容量が大きい」「対応方式が異なる」など、比較上の違いがあるセルだけに使えば、色の面積を抑えながら視線を誘導できます。

一方、同じ値のセルまで色を変える必要はありません。同じ内容は白 ■#FFFFFF のままにし、違いだけに色を使うと、表を見たときの情報量を増やしすぎずに済みます。強調色は「優れている」「劣っている」という評価ではなく、あくまで差がある場所を示す補助として扱います。

○×や強調色の意味を固定し、スマホでも比較軸を失わない

比較表で緑を「良い」、赤を「悪い」と決めると、価格・機能・制限など評価基準が異なる項目で意味がぶれることがあります。単純な優劣を付けられない項目では、色より「対応／非対応」「あり／なし」「5GB／20GB」のような具体的な文字を優先します。チェックや×印を使う場合も、必要なら文字を併記し、記号だけに意味を背負わせないようにします。

WCAG 2.2では、通常サイズの文字は背景とのコントラスト比4.5:1以上、大きな文字は3:1以上が基準です。また、比較表内に選択ボタンや切り替え操作がある場合は、操作部品や状態を識別するために必要な視覚情報について、隣接色との3:1以上も確認します。

スマホで横幅が足りない場合は、横スクロールやカード形式へ変えても、どの値がどの見出しに対応しているか分かる状態を保ちます。HueRollでは、候補色を3桁または6桁のHEX（Webで色を表す16進数コード）やカラーピッカーで調整し、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していないため、比較表の背景と文字など実際に隣接する組み合わせは別途確認します。