セマンティックカラーとは？Success・Warning・Errorの色を設計する方法

WEBサイトで「保存できた」「確認が必要」「処理に失敗した」を伝えるとき、画面ごとに違う緑・黄色・赤を選ぶと、同じ状態でも表示がばらばらになります。そこで使うのがセマンティックカラーです。「この色は成功」「この色は警告」というように、色へ共通の意味を割り当てる考え方を指します。ここでは、店舗の棚卸しCSVをアップロードする業務用WEB画面を例に、Success・Warning・Errorの設計手順を紹介します。

まずSuccess・Warning・Errorの意味と使う条件を決める

Success（成功）は、処理が実際に完了した状態です。アップロードボタンを押しただけでは成功とせず、ファイルの取り込みが確認できてから表示します。Warning（警告）は、確認や注意が必要でも、直ちに処理失敗を意味しない状態です。例えば締切が近い場合に使います。Error（エラー）は、必要な処理を進められない、または実行できなかった状態です。原因と解決に向けた操作を伝えます。

先にこの3つの使い分けを決め、その後で色を割り当てます。緑・黄系・赤系は一般的な候補ですが、どの製品でも必須の色というわけではありません。サイトの主なボタン色やブランドカラーとは別に意味を管理し、「処理中」をむやみにWarningへ含めたり、単なる停止をErrorと呼んだりしないようにします。

背景・文字・アイコン・枠線をセットで作る配色例

次は白 ■#FFFFFF のページに、3種類の通知パネルを表示する場合の例です。HEX（16進数でWEB上の色を指定するコード）を背景と文字で分けています。文字色を見出し・本文・意味のあるアイコン・パネルの枠線で共用すると、状態ごとのルールを覚えやすくなります。

Successは淡い緑 ■#EDF8F1 に濃い緑 ■#166534 を合わせ、文字と背景のコントラスト比は約6.55:1です。Warningは淡い黄 ■#FFF4D8 と濃い茶 ■#765002 で約6.57:1、Errorは淡い赤 ■#FDEDED と濃い赤 ■#A12634 で約6.51:1です。色の名前で判断するのではなく、実際に使う2色の組み合わせを測っています。

淡い通知背景と白 ■#FFFFFF の差は、それぞれ約1.09〜1.13:1と小さく、背景色だけで重要な境界を示すには弱い組み合わせです。そこで各状態の濃い色を枠線にも使います。枠線と周囲の白 ■#FFFFFF の比は、Successの濃い緑 ■#166534 が約7.13:1、Warningの濃い茶 ■#765002 が約7.20:1、Errorの濃い赤 ■#A12634 が約7.39:1です。いずれも周囲との輪郭を識別しやすい明暗差があります。

同じ状態なら通知パネル、短い状態ラベル、一覧の詳細画面で色の役割をそろえます。一方、案内文は用途に合わせて変えます。「取込成功」には何が保存できたか、「要確認」には期限や対象、「取込失敗」には必須列の見直しなど次の操作を書き、色だけに意味を背負わせないことが重要です。

色だけに依存しない表示と運用上の注意点

W3CのWCAG（WEBコンテンツのアクセシビリティに関する指針）2.2では、情報を色だけで伝えないことが求められます。「✓ 成功」「! 要確認」「× エラー」のように状態名や形を添え、特に入力エラーでは該当箇所と内容を文字で示します。WCAG 2.2のレベルAAでは通常の文字は背景との比4.5:1以上、大きな文字は3:1以上が基準です。識別に必要なアイコンや操作部品の輪郭などの非テキスト情報にも、隣接色との3:1以上が求められます。

画面を更新しても古い成功表示が残ると誤解につながるため、状態が変わればメッセージも更新します。赤いErrorを削除ボタンの強調色と混同させないことや、ダークモードでは背景と文字の組み合わせを改めて検証することも確認しましょう。今回の比率は不透明な単色同士の計算値で、ページ全体の基準適合を保証するものではありません。

HueRollではHEX入力とティント・シェードなどの候補、選択色と白・黒とのコントラストを確認できます。ただし、今回のような淡い背景と濃い文字の任意の2色比較やAA・AAAの自動判定はできないため、別の方法で組み合わせを確かめます。