ピュア・グリーンに合う色は？クリアな緑をフレッシュに際立たせる配色例【#00FF40】

ピュア・グリーン（■#00FF40）は、緑を中心にわずかにシアン側へ寄った、非常に明るく鮮やかな色です。カスタマーサポートのチャット受信箱では、選択中の会話、主要な「返信を送信」ボタン、現在操作している項目のアクセントなどへ使うと、クリアな緑をフレッシュに際立たせながら視線を集めやすくなります。ただし、白に近い背景との明度差は小さいため、緑の塗りだけで選択状態やボタンの境界を示すのは避けた方が安全です。ここでは、フォレストグラファイト、フロストホワイト、ディーププラムを組み合わせます。

フォレストグラファイトで輪郭を作り、明るい背景とプラムで役割を分ける

■#00FF40には、本文・会話タイトル・枠線用のフォレストグラファイト■#13251A、画面・メッセージ一覧の背景用のフロストホワイト■#F6FBF7、補助操作用のディーププラム■#6B426Eを合わせる例が考えられます。

■#13251Aは緑みをわずかに含む低彩度の濃色で、鮮やかなグリーンの上でも文字やアイコンを落ち着いて見せられます。■#F6FBF7はごく淡い緑みを含む明色なので、会話一覧や本文エリアを軽く保ちながら主役色とのつながりを残せます。■#6B426Eは赤紫寄りの濃色で、緑から色相（赤・青・緑など色みの違い）を離しつつ、エスカレーションや履歴表示などの補助操作を別の役割として示しやすくなります。

チャット受信箱では、ピュア・グリーンを選択中の会話と主要返信操作に集める

実装では、受信箱全体と未選択の会話カードを■#F6FBF7にし、選択中の会話、主要な「返信を送信」ボタン、現在操作しているタブなどへ■#00FF40を使います。その上の文字とアイコンを■#13251Aにすると、コントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約11.76:1です。通常サイズの文字に必要な4.5:1以上を確保できます。

顧客名、メッセージ本文、受信時刻、担当者名は■#13251Aにし、■#F6FBF7との比率は約15.35:1です。「上位担当へ引き継ぐ」「履歴を見る」などの補助ボタンは■#6B426Eを背景にし、その上の文字を■#FFFFFFにすると約7.99:1です。プラムとページ背景の差も約7.63:1あります。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字に4.5:1以上が必要です。また、意味のあるUI（ユーザーが操作するボタンや選択欄などの画面部品）やグラフィックを識別するために必要な視覚情報は、隣接色との3:1以上が基準になります。

フレッシュさを保つなら、明るい背景では濃い枠線を残し、状態を色だけで伝えない

■#00FF40と■#F6FBF7のコントラスト比は約1.30:1、■#00FF40と■#FFFFFFも約1.37:1です。そのため、明るい画面上に緑のボタンや選択カードを置く場合は、塗りだけを境界にせず、■#13251Aの枠線・文字・アイコンを併用します。鮮やかな緑の上に白の通常文字を置く使い方も避けます。

また、「対応中」「保留」「解決済み」などの会話状態をグリーンとプラムの色分けだけで伝えず、状態名の文字、チェックマーク、時計アイコンなども組み合わせます。■#00FF40と■#6B426Eのコントラスト比は約5.85:1ですが、色の差だけに意味を持たせない方が状態を判断しやすくなります。HueRollでは■#00FF40をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。