ブライト・グリーンに合う色は？鮮明な緑をフレッシュに引き立てる配色例【#3DFF6E】

ブライト・グリーン（■#3DFF6E）は、明るく鮮やかな緑です。シェアサイクルの貸出開始画面では、選択中の自転車、主要な「利用を開始」ボタン、現在選んでいる料金プランのアクセントなどに絞って使うと、鮮明な緑をフレッシュに引き立てながら車両情報や料金、利用条件を整理しやすくなります。ここでは、セージホワイト、フォレストインク、ディープベリーを組み合わせます。

セージホワイトを土台にし、濃いフォレストとベリーで鮮明な緑を整える

■#3DFF6Eには、車両一覧や料金カードの背景用のセージホワイト■#F7FBF6、自転車番号・料金・利用条件・主要ボタン文字用のフォレストインク■#173122、利用履歴や料金詳細などの補助操作用のディープベリー■#653D55を合わせる例が考えられます。

■#F7FBF6はごく淡い緑みを含む明色で、車両一覧や説明カードの広い面を軽く保てます。■#173122は緑みを含む低彩度の濃色なので、自転車番号、料金、返却条件、注意事項などをブライト・グリーンより落ち着いて整理できます。■#653D55は赤紫寄りの低彩度な濃色で、緑から色相（赤・青・緑など色みの違い）を離しているため、「利用履歴を見る」「料金詳細を確認」などの補助操作を主要な開始操作と分けやすくなります。

貸出開始画面では、ブライト・グリーンを選択中の自転車と主要操作に使う

実装では、車両一覧と未選択カードの背景を■#F7FBF6にし、自転車番号、料金、返却条件、利用時間の説明を■#173122にします。この組み合わせのコントラスト比（文字や画面部品と背景の相対的な明るさの差を示す数値）は約13.40:1です。

選択中の自転車カード、主要な「利用を開始」ボタン背景、現在選んでいる料金プランの短いアクセントへ■#3DFF6Eを使い、その上の文字と枠線を■#173122にすると約10.49:1です。通常サイズの文字に必要な4.5:1以上を十分に確保できます。一方、■#3DFF6Eと■#F7FBF6の差は約1.28:1しかないため、明るい背景上では緑の塗りだけでカードやボタンの境界を示さず、■#173122の枠線やアイコンを併用します。この枠線とページ背景の差は約13.40:1です。

「利用履歴を見る」「料金詳細を確認」などの補助ボタンは■#653D55を背景にし、その上の文字を■#FFFFFFにすると約8.93:1です。ディープベリーとページ背景の差も約8.54:1あり、■#3DFF6Eとの比率は約6.69:1です。

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

フレッシュに見せるなら、白文字や利用状態の色分けだけに頼らない

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

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