リッチ・シャルトリューズに合う色は？深い黄緑を自然に引き立てる配色例【#66B814】

リッチ・シャルトリューズ（■#66B814）は、黄みの強い緑を鮮やかに深めた色です。Webサイトでは、ハイキングのルート計画アプリで、選択中のコース、距離や所要時間の強調、主要な「ルートを保存」ボタンなどに使うと、自然を連想しやすい黄緑を主役にしながら情報を整理しやすくなります。ただし、淡い背景の上にシャルトリューズの塗りだけを置くと、ボタンや選択カードの境界としてはコントラストが不足する場合があります。ここでは、ペールトレイルアイボリー、フォレストチャコール、クレイベージュを合わせ、自然な色相のつながりとUIの見分けやすさを両立する配色を考えます。

ペールトレイルアイボリーを土台にし、土色のベージュで黄緑を自然に支える

■#66B814には、背景用のペールトレイルアイボリー■#F8FAF2、本文や枠線用のフォレストチャコール■#2E3524、補助操作用のクレイベージュ■#C9A28Fを合わせる例が考えられます。

■#F8FAF2はごく淡い黄緑みを含む明色で、シャルトリューズとのつながりを残しながら地図やコース情報の広い背景に使えます。■#2E3524は緑みを含む低彩度の濃色なので、コース名、標高差、距離、注意事項などを落ち着いて整理できます。■#C9A28Fは赤みを含む土色系の低彩度色で、黄緑から色相を離しつつ鮮やかさを抑えているため、補助ボタンや休憩地点のラベルに穏やかな変化を加えられます。

ルート計画画面では、リッチ・シャルトリューズを現在のコースと主要操作に絞る

実装では、地図横のコース一覧や情報カードの広い背景を■#F8FAF2にし、選択中のコース、距離や所要時間の強調、主要な「ルートを保存」ボタン背景へ■#66B814を使います。その上の文字は■#2E3524にすると、コントラスト比は約5.11:1となり、通常サイズの文字に必要な基準を満たします。標高差、難易度、注意事項なども■#2E3524へまとめると、シャルトリューズを主要な強調箇所へ限定できます。

UI（ユーザーが操作するボタンやコース選択などの画面部品）の補助操作には、■#C9A28Fを「休憩地点を見る」などのボタン背景に使い、文字と枠線を■#2E3524にします。シャルトリューズの主要ボタンにも■#2E3524の枠線を付けると、淡い背景との境界を色面だけに頼らず示せます。

コントラスト比は、文字やUIと背景の相対的な明るさの差を示す数値です。■#2E3524と■#F8FAF2は約12.08:1、■#2E3524と■#66B814は約5.11:1、■#2E3524と■#C9A28Fは約5.48:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。

自然に見せるなら、黄緑と土色の塗りだけでコース状態を識別させない

■#66B814と■#F8FAF2のコントラスト比は約2.37:1、■#C9A28Fと■#F8FAF2は約2.20:1です。意味のあるUI部品を識別するための視覚情報には隣接色との3:1以上が求められるため、淡い背景上で黄緑やベージュの塗りだけにボタンやカードの境界を任せるのは避けます。■#2E3524の枠線や文字を組み合わせると、必要な境界を補えます。

また、「選択中」「通行注意」「閉鎖中」などの状態は、シャルトリューズとクレイベージュの色分けだけで伝えず、状態名の文字、アイコン、線種、警告記号なども併用します。地図や山の写真に黄緑が多い場合は、ページ全体へさらに■#66B814を広げるより、■#F8FAF2の余白を十分に残す方が、写真や地図と操作を分けやすくなります。HueRollでは■#66B814をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。