決済ページの配色はどうする？情報を見やすくまとめるWEBデザイン

決済ページでは、入力項目・注文内容・金額・支払いボタンなど、性質の違う情報を短い画面の中で整理する必要があります。色を増やして区切るより、背景と文字をニュートラルにそろえ、主要な操作だけにアクセントを使う方が情報の優先順位を作りやすくなります。ここでは、白と淡いグレーを基調にし、支払いボタンだけをブルーで強調する配色例を考えます。

決済ページは色より先に情報のまとまりを分ける

ページ背景をライトグレー ■#F8FAFC、入力欄や注文内容のカード面を白 ■#FFFFFF、見出しと本文をダークブルーグレー ■#334155 にすると、文字は白 ■#FFFFFF に対して約10.35:1、ライトグレー ■#F8FAFC に対して約9.90:1のコントラスト比になります。

■#F8FAFC と白 ■#FFFFFF の差は約1.05:1と小さいため、カードの境界そのものが情報整理に必要な場合は、この背景差だけに頼りません。境界線をスレートグレー ■#64748B にすると、白 ■#FFFFFF に対して約4.76:1です。配送先、支払い方法、注文内容などを見出しと余白でも分ければ、色数を増やさずに整理できます。

入力欄は静かにし、支払いボタンだけを強調する

入力欄の文字は ■#334155、補足説明はブルーグレー ■#475569 とすると、白 ■#FFFFFF に対してそれぞれ約10.35:1、約7.58:1です。入力欄は背景を白 ■#FFFFFF のままにし、必要な境界を ■#64748B にすると、フォーム全体を強く着色しなくても位置を把握しやすくなります。

W3Cのフォームガイドでは、入力欄には目的が分かるラベルを付け、必要な入力形式などの説明も利用者が確認できる形で示すことが勧められています。プレースホルダーは入力を始めると消えるため、ラベルの代わりにはしません。たとえば「カード有効期限（MM/YY）」のように、必要な情報を文字で示します。

主要な支払いボタンだけをロイヤルブルー ■#1D4ED8 にし、文字を白 ■#FFFFFF にすると約6.70:1です。配送方法の選択や補助リンクまで同じ強い色にせず、主要操作だけにアクセントを絞ると、次に何を押すかを見つけやすくなります。

エラーと最終確認は色以外の手掛かりも使う

入力エラーを示す場合は、ペールレッド ■#FEF2F2 の背景にダークレッド ■#B42318 の文字を使うと約6.01: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自動判定には対応していないため、決済ページの背景・文字・入力欄・ボタンなど、実際に隣接する組み合わせは別途確認します。