ブライト・スプリンググリーンに合う色は？明るい新緑を躍動的に見せる色合わせ【#55FF3D】

ブライト・スプリンググリーン（■#55FF3D）は、黄みを含む明るく鮮やかな新緑です。駐車アプリの駐車開始画面では、選択中の駐車エリア、主要な「駐車を開始」ボタン、利用中セッションのアクセントなどに絞って使うと、明るい新緑を躍動的に見せながら料金や利用時間、車両情報を整理しやすくなります。ここでは、リーフホワイト、ディープスレート、ディープバイオレットを組み合わせます。

リーフホワイトを土台にし、スレートとバイオレットで新緑を引き締める

■#55FF3Dには、駐車エリア一覧や料金カードの背景用のリーフホワイト■#F8FBF4、料金・時間・車両番号・主要ボタン文字用のディープスレート■#1E2933、履歴表示や時間延長などの補助操作用のディープバイオレット■#5D3E68を合わせる例が考えられます。

■#F8FBF4はごく淡い黄緑を含む明色で、駐車エリアや料金情報の広い面を軽く保てます。■#1E2933は青みを含む低彩度の濃色なので、駐車料金、残り時間、車両番号、注意事項などを新緑より落ち着いて整理できます。■#5D3E68は紫寄りの低彩度な濃色で、新緑から色相（赤・青・緑など色みの違い）を離しているため、「利用履歴を見る」「時間を延長」などの補助操作を主要な開始操作と分けやすくなります。

駐車開始画面では、ブライト・スプリンググリーンを選択エリアと主要操作に使う

実装では、駐車エリア一覧と未選択カードの背景を■#F8FBF4にし、エリア名、料金、最大利用時間、車両番号を■#1E2933にします。この組み合わせのコントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約14.15:1です。

選択中の駐車エリア、主要な「駐車を開始」ボタン背景、利用中セッションの短いアクセントへ■#55FF3Dを使い、その上の文字と枠線を■#1E2933にすると約11.10:1です。通常サイズの文字に必要な4.5:1以上を十分に確保できます。一方、■#55FF3Dと■#F8FBF4の差は約1.28:1しかないため、明るい背景上では新緑の塗りだけでカードやボタンの境界を示さず、■#1E2933の枠線やアイコンを併用します。この枠線とページ背景の差は約14.15:1です。

「利用履歴を見る」「時間を延長」などの補助ボタンは■#5D3E68を背景にし、その上の文字を■#FFFFFFにすると約8.92:1です。ディープバイオレットとページ背景の差も約8.54:1あり、■#55FF3Dとの比率は約6.69:1です。

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

躍動的に見せるなら、白文字や駐車状態の色分けだけに頼らない

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

また、「利用可能」「選択中」「駐車中」「終了間近」「終了済み」などの状態を色だけで表さず、状態名の文字、時計アイコン、残り時間、チェックマークなども併用します。HueRollでは■#55FF3DをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。