ステータス表示の色はどう決める？完了・進行中・停止を伝える配色

ステータス表示では、「完了」「進行中」「停止」の違いを一覧の中ですばやく見分けられることが大切です。ただし、緑・青・グレーなどの色だけに意味を持たせると、色の違いを見分けにくい利用者には状態が伝わりません。基本は状態名を文字で表示し、色は見つけやすくする補助として使います。ここでは、淡い背景と濃い文字を組み合わせた3種類のステータス表示を例に考えます。

状態名を主情報にして、色は補助にする

「完了」「進行中」「停止」は、色だけでなく文字そのものを表示します。たとえば丸い点やアイコンを添える場合も、「● 完了」「● 進行中」「■ 停止」のようにラベルを残せば、色を見分けなくても状態を理解できます。形を変える方法もありますが、状態名が読めることを優先します。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、色を情報伝達の唯一の手段にしないことが求められます。また、「停止」は必ずしもエラーや危険を意味しません。サイト内で赤をエラーや削除などに使っている場合は、停止をグレーで表すなど、既存の意味と衝突しないようにします。

完了・進行中・停止を淡い背景と濃い文字で分ける

完了はペールグリーン ■#ECFDF3 の背景にダークグリーン ■#166534 の文字を合わせると、コントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は約6.76:1です。左線や意味のあるアイコンにグリーン ■#15803D を使う場合、背景の ■#ECFDF3 に対して約4.76:1です。

進行中はペールブルー ■#EFF6FF にダークブルー ■#1E40AF の文字で約8.01:1です。補助の線やアイコンにブルー ■#2563EB を使うと、背景との比は約4.75:1です。進行中だけアニメーションさせる必要はなく、「進行中」という文字や進捗率など、静止した状態でも分かる情報を残します。

停止はライトグレー ■#F3F4F6 にダークグレー ■#4B5563 の文字で約6.87:1です。線やアイコンにグレー ■#6B7280 を使うと背景との比は約4.39:1です。■#6B7280 はこの背景上で通常サイズの文字に必要な4.5:1を下回るため、本文文字には使わず、文字以外の線やアイコンなどの補助表現に限定します。

文字とアイコンは別々の基準で確認する

WCAG 2.2では、通常サイズの文字は背景とのコントラスト比4.5:1以上、大きな文字は3:1以上が基準です。一方、状態を理解するために必要なアイコンや、操作部品を識別するために必要な視覚情報には、隣接色との3:1以上が基準になります。そのため、同じ色でも「文字として使えるか」と「アイコンや境界線に使えるか」は分けて判断します。

ステータスがクリックできるフィルターやボタンになっている場合は、選択中かどうかも色だけに頼らず、チェックマーク、枠線、太字、選択ラベルなどを併用します。無効状態と停止状態を同じ薄いグレーで表すと意味が混ざることがあるため、ラベルや形でも区別します。

HueRollでは、候補色を3桁または6桁のHEX（Webで色を表す16進数コード）やカラーピッカーで調整し、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していないため、ステータス背景・文字・アイコンなど、実際に隣接する色の組み合わせは別途確認します。