カート追加後のボタン色は変えるべき？状態が伝わる配色

ECサイトで「カートに入れる」を押した後、ボタンを緑色に変えるべきでしょうか。色を変えると操作結果に気づきやすくなる場合はありますが、それだけでは追加が完了したのか、もう一度押せるのか分かりません。カート追加後は、色より先に「処理中」「追加できた」「失敗した」の違いと、次にできる操作を明確にすることが大切です。

追加後は色を変えるより、操作結果と次の動作を示す

商品をもう一度追加できるECサイトでは、追加成功後もボタンの色を維持し、「もう1点追加」など実際の動作が分かる文字にする方法があります。同時に、ボタンの近くへチェックマーク付きの「カートに1点追加しました」を表示すれば、色に頼らず完了が伝わります。購入可能な状態なのに、ボタンを薄いグレーにして押せないように見せる必要はありません。

反対に、同じ商品を複数追加できない販売方法なら、追加後にボタンを「カートを見る」など別の操作へ切り替える方が自然な場合もあります。「追加済み」と書いたボタンが、押すと何をするのか不明な状態を避けましょう。

通信中はまだ完了していません。「追加中…」という文字と処理中の表示を使い、必要に応じて連続タップを一時的に防ぎます。失敗した場合は成功色を出さず、エラーの説明と再試行できる操作を示します。色は結果を補う役割に留めます。

保存容器セットの商品ページで3段階を見せる配色例

保存容器セットを1点ずつ追加できる架空の商品ページを考えます。HEX（16進数を使ったWEB用のカラーコード）で、操作ボタンと状態メッセージの色を決めます。コントラスト比は隣り合う2色の明るさの差を示す数値です。

• 商品ページの土台：ページの外側を淡いグレー■#F6F8FA、商品情報欄を白■#FFFFFFにします。両色の比は約1.06:1と小さいため、区切りは余白や見出しでも示します。商品名は濃い青灰■#263849にすると、白との比は約12.04:1です。
• 追加前・「カートに入れる」：白■#FFFFFFの情報欄に、濃い青緑■#185875のボタンを置き、文字を白■#FFFFFFにします。文字とボタン面、ボタン面と周囲の白はともに約7.80:1です。購入へ進む操作の色として、ほかの商品ともそろえます。
• 追加中・「追加しています…」：処理を待つ間もボタンの濃い青緑■#185875と白■#FFFFFFの文字を維持します。色だけを変えて「成功」と誤解させず、処理中を文字と必要に応じた動きで伝えます。多重送信を防ぐ仕組みも合わせて考えます。
• 追加成功・完了メッセージ：ボタンの近くに淡いグリーン■#E6F4EAの面を置き、濃い緑■#205C43でチェックマークと「カートに1点追加しました」を表示します。文字・マークと面の比は約6.92:1です。グリーンの面と周囲の白■#FFFFFFの差は約1.14:1なので、枠が必要なら濃い緑■#287052を使い、内側の面と約5.24:1、外側の白と約5.95:1の差を作れます。
• 次の操作・「もう1点追加」「カートを見る」：追加を繰り返せる商品では主ボタンを同じ濃い青緑■#185875のまま「もう1点追加」に変えます。別に白■#FFFFFFの面へ青灰■#315C74の文字と枠で「カートを見る」を用意すると、文字・枠と白の比は約7.21:1です。何を押すと何が起こるかを文字で区別します。

失敗時と読み上げ、キーボード操作まで確認する

通信が失敗した場合は、淡い赤■#FFF0EDの面に濃い赤茶■#923B30で「カートに追加できませんでした。再度お試しください」と表示できます。文字と面の比は約6.55:1です。実際には追加に成功している可能性もあるため、画面上の表示とカート内の数量が食い違わないよう、サーバー側の結果を確認してから状態を確定します。

表示が切り替わっても画面移動しない場合、結果メッセージを読み上げでも伝えられるようにします。例えばrole="status"を用いれば、フォーカスを移さずに「追加しました」などの更新を知らせる方法になります。エラー表示や操作中の通知も、実装に合わせて適切に区別します。キーボードで操作する場合は、ボタンが使えるときにフォーカスを見失わないことも確認しましょう。

WCAG 2.2（WEBコンテンツのアクセシビリティ指針）では、通常サイズの文字と背景のコントラストは原則4.5:1以上、操作部品や状態を見分けるのに必要な図形は隣接色と原則3:1以上が基準です。色だけで成功や失敗を伝えるのは避けます。HueRollではHEXで色を調整し、選択色と白・黒とのコントラストを確認できますが、任意の2色の比較やAA・AAAの自動判定はできません。今回の淡い通知面と濃い文字の組み合わせは別途計算してください。