深緑とゴールドの配色｜装飾を効果的に見せる色の比率

深緑とゴールドを組み合わせるなら、金色を広げる前に「どこを飾るか」を決めるのがポイントです。深緑は大きな背景、ゴールドは細い飾り線や限定情報など、使う場所を分けると両方の色を活かせます。この記事では茶葉専門店の試飲会バナーを例に、ゴールドを約5％に抑える案と約10％に増やす案を比べ、文字・ボタンとの組み合わせも確認します。

深緑を土台にして、ゴールドは5％程度から試す

今回は深緑の見本を■#00582D、ゴールド風の黄色を■#D4AF37とします。色名には資料による違いがあり、これらは制作例で使う値です。HEX（ヘックス）はWebで色を6桁の英数字で指定するコードです。なお、CSS（Webページの見た目を指定する仕組み）の色名「gold」は別の明るい黄色■#FFD700です。今回のゴールドはそれより落ち着いた黄みの見本で、単色のHEX指定だけで金属の光沢が再現されるわけではありません。

まず、バナーで深緑■#00582Dを約70％、温かみのあるオフホワイト■#F7F4ECを約25％、ゴールド■#D4AF37を約5％にする配分を考えます。これはデザインを試すための面積の目安で、守るべき規格や固定の配色法則ではありません。タイトルや説明を載せる深緑の面を広く取り、日時などの詳しい案内はオフホワイトにまとめ、ゴールドは見出し脇の飾り線や角の模様に絞ります。

深緑■#00582Dにオフホワイト■#F7F4ECの文字を載せたときのコントラスト比は約7.85:1です。コントラスト比は、文字と背景など隣り合う色の明るさの差を表す数値です。一方、ゴールド■#D4AF37と深緑■#00582Dは約4.10:1なので、金色を通常サイズの本文文字に使うには不足します。金色は装飾に、説明文はオフホワイトに、と役割を分けます。

茶葉専門店の試飲会バナーで5％と10％を比較する

案1：ゴールド約5％で控えめに飾る。「秋の茶葉試飲会」という見出しと短い紹介を深緑■#00582Dの背景にオフホワイト■#F7F4ECで表示し、文字と背景の比を約7.85:1にします。ゴールド■#D4AF37は見出しの両端の飾り線と小さな葉の模様だけに使います。飾りの色は深緑と約4.10:1の差があります。日時・会場はオフホワイト■#F7F4ECの案内欄にまとめ、文字を深緑■#00582Dにすると約7.85:1です。

「試飲を予約する」ボタンは深緑の面の上にオフホワイト■#F7F4ECの背景で置き、文字を深緑■#00582Dにします。ボタン内の文字と背景、ボタンと周囲の深緑の比はどちらも約7.85:1です。申込み操作に金色を使わなくても、装飾とボタンの役割を分けられます。

案2：ゴールド約10％で限定情報を目立たせる。記念企画のバナーなら、深緑■#00582D約55％、オフホワイト■#F7F4EC約35％、ゴールド■#D4AF37約10％を試します。増やしたゴールドは背景全体に散らさず、深緑の上に置く「今週限定」の小さなラベルと見出しの縁取りに集中させます。ラベルの背景をゴールド■#D4AF37、文字をさらに暗い緑■#102D21にすると約7.04:1です。ラベルと周囲の深緑■#00582Dも約4.10:1の差があります。

案内文はオフホワイト■#F7F4EC上に深緑■#00582Dで載せ、申込みボタンも同じ淡い背景上に深緑の塗りとオフホワイトの文字で配置します。どちらも約7.85:1の文字コントラストを保てます。金色を10％に増やすと装飾が主役に近づくため、バナー全体が騒がしく感じられる場合は5％程度へ戻し、模様を減らします。

ゴールドを文字や境界線にする場合は明るさを確認する

ゴールド■#D4AF37とオフホワイト■#F7F4ECのコントラスト比は約1.91:1しかありません。淡い案内面では、金色の細い線だけで重要なカード境界を示したり、金色で小さな説明文を書いたりするのは避けます。また、金色と深緑■#00582Dは約4.10:1なので、深緑の上の通常サイズの金色文字にも十分ではありません。必要な文字にはオフホワイト■#F7F4EC、金色のラベル内には濃い緑■#102D21を使い分けます。

WCAG 2.2（Webコンテンツのアクセシビリティ指針）のレベルAAでは、通常サイズの文字に4.5:1以上、大きな文字に3:1以上が原則です。操作に必要な境界や意味を持つ図形は、隣接色と3:1以上が必要な場合もあります。一方、意味を持たない飾り線すべてに同じ基準がかかるわけではありません。細い線は数値を満たしても見えにくい場合があるので、表示サイズも確認しましょう。

HueRollではHEXを入力して色を調整し、選んだ色と白・黒のコントラスト比を確認できます。ただし任意の2色間の比較やAA・AAAの自動判定には対応していません。ゴールドの面積を変えた後も、実際に隣り合う文字・背景・ボタンの色は別途確認してください。