ビビッド・シャルトリューズに合う色は？強い黄緑を軽快に引き立てる配色例【#8FFF1F】

ビビッド・シャルトリューズ（■#8FFF1F）は、黄色と緑の中間にある、非常に明るく鮮やかな黄緑です。倉庫のピッキング（注文に必要な商品を棚から集める作業）画面では、選択中の注文、現在向かう棚番号、主要な「ピッキング完了」ボタンなどに絞って使うと、強い黄緑を軽快に見せながら商品名や数量を整理しやすくなります。ここでは、フロストアイボリー、インクネイビー、ディープバイオレットを組み合わせます。

フロストアイボリーを土台にし、濃いネイビーとバイオレットで黄緑を引き締める

■#8FFF1Fには、作業一覧の背景用のフロストアイボリー■#FAFBF2、商品名・棚番号・数量・枠線用のインクネイビー■#20263A、履歴確認などの補助操作用のディープバイオレット■#543E68を合わせる例が考えられます。

■#FAFBF2はごく淡い黄緑みを含む明色で、注文一覧や商品カードの広い面を軽く保てます。■#20263Aは青みを含む低彩度の濃色なので、商品名、棚番号、必要数量、注文番号などを主役色より落ち着いて整理できます。■#543E68は紫寄りの濃色で、黄緑から色相（赤・青・緑など色みの違い）を大きく離しながら鮮やかさを抑えているため、「作業履歴を見る」などの補助操作を主要な完了操作と分けやすくなります。

ピッキング画面では、ビビッド・シャルトリューズを現在位置と完了操作に使う

実装では、注文一覧と未選択の商品カードを■#FAFBF2にし、商品名、棚番号、数量、注文番号を■#20263Aにします。この組み合わせのコントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約14.39:1です。

選択中の注文、現在向かう棚番号の強調、主要な「ピッキング完了」ボタン背景へ■#8FFF1Fを使い、その上の文字と枠線を■#20263Aにすると約11.78:1です。通常サイズの文字に必要な4.5:1以上を十分に確保できます。一方、■#8FFF1Fと■#FAFBF2の差は約1.22:1しかないため、明るい背景上では黄緑の塗りだけでカードやボタンの境界を示さず、■#20263Aの枠線やアイコンを併用します。この枠線と■#FAFBF2の背景は約14.39:1です。

「作業履歴を見る」などの補助ボタンは■#543E68を背景にし、その上の文字を■#FFFFFFにすると約9.27:1です。ディープバイオレットとページ背景の差も約8.89:1あり、■#8FFF1Fとの比率は約7.28:1です。

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

軽快に見せるなら、未処理・作業中・完了を黄緑だけで伝えない

■#8FFF1Fと■#FFFFFFのコントラスト比は約1.27:1なので、黄緑背景へ通常サイズの白文字を置く使い方は避けます。主要ボタンには■#20263Aの文字を使い、明るいページ背景上では同じ濃色の枠線も残します。

また、「未処理」「作業中」「完了」「保留」などの状態を色だけで表さず、状態名の文字、チェックマーク、数量、進行中を示すアイコンなども併用します。HueRollでは■#8FFF1FをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。