ディープ・グリーンに合う色は？深緑の力強さを活かす配色例【#1B983A】

ディープ・グリーン（■#1B983A）は、鮮やかさを残しながら明るさを抑えた力強い緑です。Webサイトでは、スポーツクラブやチームの試合日程・結果ページで、チーム名、試合カードの見出し、主要な「チケットを見る」ボタンなどに使うと、明るい緑よりも落ち着きを残しながら存在感を出しやすくなります。ただし、■#1B983Aは明るい背景上の通常文字としてはコントラストが十分ではないため、文字色として広く使うより、主要ボタンや選択面の背景として役割を決める方が扱いやすい色です。ここでは、ライトセージホワイト、インクグリーン、ディーププラムを合わせ、深緑の力強さを活かしながら試合情報を整理しやすい配色を考えます。

ライトセージホワイトを土台にし、濃い文字色とプラムで役割を分ける

■#1B983Aには、背景用のライトセージホワイト■#F4F7F1、本文やボタン文字用のインクグリーン■#101512、補助操作用のディーププラム■#3C2E46を合わせる例が考えられます。

■#F4F7F1は緑みをわずかに含む明色で、日程表や試合カードの広い面を軽くできます。■#101512はほぼ黒に近い濃色なので、対戦相手、日時、会場、得点などを緑一色にせず整理できます。■#3C2E46は紫寄りの濃色で、緑から色相を離しながら彩度を抑えているため、補助操作を別の役割として見せやすくなります。

試合日程・結果ページでは、ディープ・グリーンを主要操作と選択面に集める

実装では、日程一覧や試合カードの広い背景を■#F4F7F1にし、主要な「チケットを見る」ボタンや選択中の試合カード背景へ■#1B983Aを使います。その上の文字は■#101512にすると、通常文字に必要なコントラストを確保できます。本文、対戦相手、会場、日時は■#101512で統一し、色だけで情報階層を作らないようにします。

UI（ユーザーが操作するボタンや選択欄などの画面部品）の補助操作には、■#1B983Aの面に■#3C2E46の小さな「詳細を見る」ボタンを置き、その文字を■#F4F7F1にする方法があります。

コントラスト比は、文字やUIと背景の相対的な明るさの差を示す数値です。■#1B983Aと■#101512は約4.92:1、■#101512と■#F4F7F1は約17.07:1、■#3C2E46と■#F4F7F1は約11.62:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。また、■#1B983Aと■#F4F7F1は約3.47:1、■#1B983Aと■#3C2E46は約3.35:1なので、これらを隣接させる意味のあるUI部品を識別するための視覚情報として必要な3:1以上も確保できます。

力強さを活かすなら、勝敗や選択状態を緑だけで伝えない

■#1B983Aと■#F4F7F1のコントラスト比は約3.47:1です。そのため、明るい背景上の通常サイズの本文文字として■#1B983Aを使うのは避け、文字は■#101512へ切り替えます。緑は主要ボタン、選択中カード、枠線などへ役割を絞ると、力強さを残しながら情報を読み分けやすくなります。

また、「勝利」「敗戦」「引き分け」や「選択中」などの状態は、緑や紫などの色だけで区別せず、結果を示す文字、アイコン、記号、太めの枠線なども併用します。HueRollでは■#1B983AをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。