状態ごとの色をどう管理する？WEB UIのカラールール

WEBサイトのボタンや申請フォームで、選択中、送信中、完了、エラーなどを画面ごとに違う色で表すと、利用者が意味を覚え直すことになります。状態ごとの色を管理するには、色だけを一覧にするのでなく、どの条件で状態が変わり、何と表示し、どの操作を許可するかまで決めることが大切です。社内の備品貸出申請画面を例に、WEB UI（ユーザーインターフェース：画面の操作部分）のカラールールを組み立てます。

操作中・処理結果・使用可否を別の状態として整理する

まず、同じ種類に見える状態を混ぜないことが基本です。「選択中」は備品を指定した状態、「送信中」は申請を処理している途中、「完了」はサーバー側で受付が確認できた結果です。ボタンを押した瞬間を完了と扱ってはいけません。「エラー」は必要な修正を示し、「無効」は条件が満たされず操作できない状態を表します。

操作できるかどうかと、処理結果の意味も分けます。たとえば備品が選択中でも、数量が未入力なら申請ボタンは無効になり得ます。またキーボードのフォーカス（次に操作を受け付ける対象）は、選択中かどうかとは別の情報です。1つの色名ですべてを表すのではなく、状態と表示部品の関係を決めます。

状態を切り替える条件も先に統一します。「申請する」を押したら送信中、受付成功の応答が返ったら完了、入力や通信の問題があればエラーにする、といった流れです。送信中には二重送信をプログラム側でも防ぎ、色が変わっただけで処理を止めたつもりにならないようにします。

備品貸出申請フォームで6つの状態を管理する例

白いカード ■#FFFFFF を淡いページ背景 ■#F6F8FB に並べる画面を想定します。HEXコードはWEBの色を16進数で指定する表記です。次の表は、ボタン・選択行・通知など異なる部品に割り当てる表示状態ごとのルールで、6種類すべてを同じボタンに使うという意味ではありません。

通常の申請ボタンは青 ■#205B84 を背景、白 ■#FFFFFF を文字にすると、コントラスト比は約7.26:1です。送信中も同じ青と白を使い、「送信中…」という文字を表示します。操作できない処理中であることは色だけでなく、送信処理とボタンの動作制御で示します。

選択中の備品行は淡い青 ■#EAF3FF と濃い青文字 ■#1D426E で約9.12:1です。ただし淡い青と白 ■#FFFFFF の差は約1.12:1なので、必要なら濃い青 ■#1D426E の選択枠を加え、「✓ 選択中」の文字も残します。選択枠は白との比が約10.21:1です。

完了通知は淡い緑 ■#EAF7EF と濃い緑 ■#176446 の組み合わせで約6.46:1、エラー通知は淡い赤 ■#FDEDED と濃い赤 ■#A12634 で約6.51:1です。完了は受付が確定した後にだけ出し、エラーでは該当する数量欄などを文章で示します。無効なボタンは淡いグレー ■#E4E9EF と濃いグレー ■#526275 で約5.12:1とし、近くに「備品と数量を選んでください」と理由を表示します。

状態の表示を統一し、色以外の情報も残す

管理表には色とHEXコードだけでなく、状態名、切り替わる条件、表示する文字、操作の可否、使う画面を記録します。処理中の表示が終わらない場合や、入力エラーを修正した場合も、いつ元の状態へ戻るかを決めておきます。別ページで同じ「完了」が出るなら、色も文言の考え方も共通にします。

無効な操作にはHTMLのdisabled属性など実際の操作を止める仕組みを使います。無効状態の文字や部品はWCAGのコントラスト要件に例外がありますが、理由の説明まで薄くしてよいわけではありません。白いカード上の通常の説明文字を ■#253649 にすると、白 ■#FFFFFF との比は約12.33:1です。

フォーカスの輪郭も、選択・完了・エラーと独立して管理します。白 ■#FFFFFF のカードに紫 ■#6A398A の外側の輪郭を使う例なら、白との比は約8.19:1です。実画面で隣接する色が違えばその組み合わせも確認し、キーボード操作時に輪郭が隠れないようにします。

WCAG（WEBコンテンツのアクセシビリティに関する指針）2.2のレベルAAでは、通常文字と背景の比は4.5:1以上、大きな文字は3:1以上が基準です。状態を識別するために必要なアイコンや輪郭などの非テキスト情報には、隣接色との3:1以上が求められます。色だけで状態を伝えず、名称やチェック印なども併用してください。掲載比率は不透明な単色同士の計算値で、画面全体の適合を保証するものではありません。

HueRollではHEXコードと濃淡の候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の直接比較やAA・AAAの自動判定には対応していないため、実際の文字・背景・選択枠は別の方法でも検証しましょう。