成功・完了メッセージに緑を使うときのWEB配色のコツ

WEBサイトで申込みや送信が終わったことを知らせるとき、緑のメッセージを使うことがあります。緑は状態を区別する手がかりになりますが、色が変わっただけでは「何が完了したのか」「次に何をすればよいのか」は伝わりません。さらに、送信ボタンを押しただけで完了と表示すると、処理に失敗しても成功したように見えてしまいます。ここでは地域の苗交換会への出品希望フォームを例に、緑の使い方と完了表示の内容を考えます。

成功を示す緑は、処理結果と次の案内をセットで使う

例えばフォームの送信後、「出品希望を受け付けました。参加可否は後日ご案内します」と表示する場合を考えます。この文なら、出品希望の送信が完了したことと、交換会への参加はまだ確定していないことを区別できます。「参加が確定しました」と書けるのは、実際に確定した場合だけです。画面のメッセージをバックエンド（送信内容を処理・保存する側）の結果と一致させましょう。

色だけで成功を伝えるのではなく、「受付完了」などの見出し、チェックマーク、受付結果の文章を組み合わせます。WCAG 2.2（WEBコンテンツのアクセシビリティ指針）は、色を情報の唯一の視覚的な手がかりにしないことを求めています。緑を選ぶ理由は必ずしも「安心を与えるから」ではなく、この画面内で通常案内・処理中・成功・失敗を区別しやすい役割を持たせるためです。

また、送信中と受付完了は別の状態です。送信中は「送信しています」、実際に受付に成功したら「受け付けました」、失敗したら理由と再操作の方法を示します。サーバーから成功の応答を受け取る前に緑の完了表示へ切り替えないことが重要です。

苗交換会の出品希望フォームに使う緑の配色例

苗の種類と希望日を入力して送信する架空のページを想定します。HEXとはWEBで色を指定する16進数のコードです。背景、文字、見出し、入力欄、ボタンに加えて、処理の状態を伝える面にも役割を付けます。

• ページ背景と通常の文字：オフホワイト■#F8F7F2にチャコール■#2B3A39の説明文を合わせると、文字と背景のコントラスト比は約11.08:1です。見出しを濃い緑■#265846にすると、同じ背景との比率は約7.63:1です。
• 入力フォームのカード：白■#FFFFFFにチャコール■#2B3A39の項目名を使うと約11.88:1です。白■#FFFFFFとページ背景■#F8F7F2の差は約1.07:1なので、必要な輪郭にはグレーグリーン■#74847Cの枠線を使います。線と白■#FFFFFFは約3.94:1です。
• 送信中のメッセージ：送信処理が続いている間は、淡い青灰■#EAF1F5に濃い青■#2A566Bで「送信中です」と表示すると約6.96:1です。この案内面とページ背景■#F8F7F2の差は約1.06:1なので、文言や進行中の表示も併用します。この段階ではまだ「完了」と書きません。
• 受付完了の背景：実際に受付できた場合は、淡い緑■#E3F1E8のパネルへ切り替えます。ページのオフホワイト■#F8F7F2との比率は約1.09:1なので、緑の面だけで完了を見分けさせず、見出しと輪郭も付けます。
• 完了の見出しとチェックマーク：濃い緑■#24553Dの「出品希望を受け付けました」とチェックマークを、淡い緑■#E3F1E8に載せます。文字・図形とも背景と約7.38:1です。マークには同じ意味の文字を添え、チェックの形や緑色を理解できなくても結果が分かるようにします。
• 完了内容の説明：チャコール■#2B3A39で「参加可否は後日ご案内します」と記載すると、完了パネルの緑■#E3F1E8に対して約10.19:1です。補足文にはグレー緑■#52645Dを使っても約5.39:1あります。次の連絡方法・時期は運営の実際の手順に合わせて記載します。
• 完了パネルの輪郭：グレー寄りの濃い緑■#4D7860の線を、淡い緑■#E3F1E8に使うと約4.32:1です。周囲の白■#FFFFFFとも約5.03:1の差があり、薄い背景のまとまりを示しやすくなります。
• 申し込んだ内容の控え：実際に保存できた苗の種類・希望日だけを示す領域には、薄い灰緑■#EEF3EEとチャコール■#2B3A39を使い、文字は約10.58:1です。控えの面と完了パネル■#E3F1E8は約1.04:1と近いので、「送信した内容」の小見出しと余白で整理します。保存していない値を確認済みとして表示しません。
• 次に進むボタン：再送信ではなく「交換会の案内に戻る」などの操作には、濃い青緑■#245E70に白■#FFFFFFで文字を載せます。文字とボタンは約7.22:1、ボタンと完了パネルの緑■#E3F1E8も約6.19:1です。必要ならパネル内に下線付きの案内リンクを置き、深い緑青■#235C56を使うと約6.58:1です。
• 送信できなかった場合：淡い赤茶■#F7EBE7に濃い赤茶■#874233で「送信できませんでした。入力内容を保持して再試行してください」と表示すると約6.30:1です。淡い赤茶とページ背景■#F8F7F2の差は約1.09:1なので、エラーの見出しと操作方法を明記します。成功の緑は出しません。

この配色では、フォームの入力面、処理中、受付成功、送信失敗を分けて表示します。ただし、色は結果を補助するだけです。何が完了して何がまだ決まっていないのかを正確に書くことが、使いやすい完了メッセージにつながります。

完了表示のタイミングと支援技術への伝え方を確認する

フォームの同じ画面内で完了メッセージへ更新し、画面遷移やフォーカス移動が起きない場合、読み上げ機能を使う人にも状態が伝わる設計が必要です。HTML（WEBページの構造を記述する言語）では、あらかじめ用意した role="status" の領域を送信結果に合わせて更新する方法があります。これは状態の変化を穏やかに知らせる仕組みで、すべての完了メッセージに緊急通知の role="alert" を使う必要はありません。完了専用ページへ移動する場合は、そのページの見出しやフォーカスの扱いも確認します。

一時的な緑の通知をすぐ自動的に消したり、画面に表示した内容が保存されたか確認せずに「成功」と書いたりしないでください。再送信で申請が重複しないか、通信に失敗した場合に内容を保てるかも実際の動作で検証します。スマートフォンやキーボード操作でも、完了の文章と次の操作が見つかるようにします。

WCAG 2.2のレベルAAでは、通常サイズの文字と背景に4.5:1以上、大きな文字に3:1以上、操作に不可欠な非テキストの表示には隣接色と3:1以上のコントラスト比が原則です。HueRollでは選択した色と白・黒とのコントラストを確認できますが、任意の2色の比較やAA・AAAの自動判定はできません。紹介した色同士の比率は別途計算しました。