ステップフォームの色はどう決める？現在位置を分かりやすくする方法

申込みや会員登録などの長いフォームを複数の画面に分ける場合は、「今どこにいるか」「どこまで終わったか」「あと何段階あるか」がすぐ分かる配色にすると迷いにくくなります。現在のステップだけ色を変える方法は分かりやすい一方、色だけに意味を持たせると状態を見分けにくい利用者もいます。この記事では、現在・完了・未完了の3状態を色と文字で整理し、ステップフォームの現在位置を分かりやすくする方法を紹介します。

現在位置は色だけでなく「何番目か」を文字でも示す

W3Cのフォームチュートリアルでは、複数ページのフォームは各段階で進捗を知らせ、可能であれば最初に全体のステップ数も示す方法が紹介されています。たとえば「配送先（2 / 4）」のように見出しへ現在位置を入れれば、色を見分けにくい場合でも残りの流れを理解できます。

ステップ一覧を表示する場合も、現在の項目には「現在」、完了済みには「完了」やチェックマークを併記し、未完了は番号と項目名を残します。支援技術にも現在位置を伝えるなら、該当するステップに aria-current="step" を設定できます。見た目の色分けと、文章・マークアップの状態表示をセットにするのが基本です。

現在・完了・未完了を3段階の色で整理する

ページ背景を白 ■#FFFFFF、本文をダークグレー ■#27313A にすると、コントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は約13.24:1です。まずフォーム本体を読みやすくし、その上でステップ表示だけに状態色を使います。

現在のステップは、淡いブルー ■#EAF2F8 の面にブルー ■#315D94 の文字・番号・枠線を組み合わせると、比率は約5.94:1です。「現在」や「ステップ2」の文字も添えることで、青色だけに現在位置の意味を持たせません。

完了済みは、ペールグリーン ■#EAF6EF の背景にダークグリーン ■#2F6B4F を使うと約5.67:1です。チェックマークと「完了」を併記すれば、色と形の両方で区別できます。これから進む未完了ステップにはライトグレー ■#F3F4F6 とダークグレー ■#4B5563 を使うと約6.87:1です。薄くしすぎて項目名まで読みにくくしないことがポイントです。

文字・丸や線・次へ進むボタンまで隣接色を確認する

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字は背景とのコントラスト比4.5:1以上、大きな文字は3:1以上が基準です。また、現在位置を示す丸・枠線・進捗線など、状態を理解するために必要な非テキスト情報は、隣接色との3:1以上が基準になります。

たとえば現在ステップのブルー ■#315D94 は白 ■#FFFFFF に対して約6.72:1、完了済みのダークグリーン ■#2F6B4F は白 ■#FFFFFF に対して約6.29:1です。白い余白上に丸や線を置く場合も見分けやすい差があります。「次へ」ボタンをブルー ■#315D94、文字を白 ■#FFFFFF にすれば約6.72:1です。

ステップフォームでは、強い色を増やすより、現在・完了・未完了の役割を固定し、番号・見出し・状態の文字を残す方が理解しやすくなります。HueRollでは候補色を3桁または6桁のHEX（Webで色を表す16進数コード）やカラーピッカーで選び、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、ステップ背景と文字・枠線など実際に隣接する組み合わせの比率は別途確認します。