UIのステータスカラー設計|成功・警告・エラー・情報の色と使い分け
Webサイトやアプリケーションでは、操作結果や現在の状態を利用者へ伝えるために、成功、警告、エラー、情報という四つのステータスがよく使われます。保存が完了したときは成功、入力内容に問題があるときはエラー、注意が必要な操作には警告、補足説明には情報というように、状態ごとに役割が異なります。
ステータスカラーは、成功なら緑、警告なら黄、エラーなら赤、情報なら青を選べば完成するものではありません。背景色、文字色、枠線、アイコン、操作要素、ライトモード、ダークモードまで含めて設計しなければ、文字が読めない、状態を区別できない、ブランドカラーと混同するといった問題が発生します。
さらに、色だけで状態を伝える設計は避ける必要があります。WCAG 2.2では、色の違いだけに依存せず、文字、形状、アイコンなど別の視覚的な手掛かりも提供することが求められています。また、通常サイズの文字には背景とのコントラスト比4.5対1以上、状態の識別に必要な非テキスト要素には隣接色とのコントラスト比3対1以上が基準になります。
本記事では、四つのステータスの意味から、カラーパレット、コンポーネント、アクセシビリティ、デザイントークン、Figma、CSSへの実装まで、実務で使える設計手順を解説します。
EN
JP
KR