カート画面の配色はどう決める？購入情報を整理して見せる方法

カート画面では、商品名・数量・単価・小計・送料・合計・購入へ進むボタンなど、多くの情報を一度に確認します。すべてを強い色で区切ると、どこを見ればよいか分かりにくくなるため、基本は白と淡いグレーで情報を整理し、合計金額と主要ボタンだけに強い色を使う方法が扱いやすいです。ここでは、商品情報を落ち着いて確認しながら、次の操作を見つけやすくする配色を考えます。

商品一覧は白を基本にして、文字の強弱で整理する

ページ背景をライトグレー ■#F8FAFC、商品ごとのカードや行を白 ■#FFFFFF にすると、購入情報を面ごとに分けやすくなります。商品名や価格はダークブルーグレー ■#334155、補足情報はブルーグレー ■#475569 とすると、白 ■#FFFFFF に対するコントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は、それぞれ約10.35:1と約7.58:1です。

■#F8FAFC と白 ■#FFFFFF の比は約1.05:1と小さいため、商品の区切りが操作や情報理解に必要なら、背景差だけに頼りません。境界線をスレートグレー ■#64748B にすると、白 ■#FFFFFF に対して約4.76:1です。余白や見出しも併用して、各商品の範囲を分かりやすくします。

数量・削除・小計は役割ごとに色の強さを変える

数量変更の入力欄やセレクトボックスは、背景を白 ■#FFFFFF、文字を ■#334155、必要な境界を ■#64748B にすると、周囲の情報と調和しながら操作位置を示せます。W3Cのフォームガイドでは、入力欄や選択欄には目的が分かるラベルを付けることが勧められています。「数量」の文字を表示し、色や位置だけで何の操作か判断させないようにします。

商品削除の操作をほかのリンクと区別したい場合は、ダークレッド ■#B42318 の文字を白 ■#FFFFFF 上で使うと約6.57:1です。ただし、赤色だけで削除を示すのではなく、「削除」という文字を必ず残します。通常の補助リンクまで同じ赤にせず、削除のような操作だけに限定すると意味が混ざりにくくなります。

各商品の小計は本文色 ■#334155 のままでも十分ですが、カート全体の合計はより濃いネイビー ■#0F172A を使うと、白 ■#FFFFFF に対して約17.85:1です。色だけでなく、文字サイズや太字も使って「商品ごとの小計」と「最終的な合計」を分けます。

合計欄と購入ボタンを最後に目立たせる

合計欄の背景をライトブルーグレー ■#F1F5F9 にし、文字を ■#334155 にすると約9.45:1です。送料や割引、税込合計などを同じ面にまとめると、商品一覧とは別の「確認エリア」として整理できます。割引の有無などを色だけで伝えず、「割引」「送料」「合計」のラベルを表示します。

購入手続きへ進む主要ボタンをロイヤルブルー ■#1D4ED8、文字を白 ■#FFFFFF にすると約6.70:1です。数量変更や削除などの補助操作まで同じ強い青にせず、次へ進む主要操作にアクセントを絞ると、画面内の優先順位を作りやすくなります。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字は背景とのコントラスト比4.5:1以上、大きな文字は3:1以上が基準です。また、操作部品を識別するために必要な境界や状態表示には、隣接色との3:1以上が基準になります。色だけで選択状態や削除操作を伝えず、文字や形も併用します。

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