アップルグリーンに合う色は？鮮やかな緑を活かす色合わせ

アップルグリーンを使いたいけれど、ほかの色と合わせると画面が派手になりすぎないか迷うことはありませんか。黄みのある鮮やかな緑は、背景や文字に落ち着いた色を選ぶと、商品の特徴やイベント情報を示すアクセントとして使えます。具体的な色見本と、Webページ・告知バナーでの組み合わせ方を紹介します。

アップルグリーンには白系・濃いグレー・ネイビーを合わせる

アップルグリーンは、黄緑寄りの明るい緑を指す色名です。名称だけで世界共通のカラーコードが決まるわけではありません。この記事では参考例として■#8DB600を使います。HEX（ヘックス）は、Webの色を「#」と6桁の英数字で指定する書き方です。制作時には色名だけでなくコードも共有すると、色の認識をそろえられます。

広い背景には黄みを抑えたアイボリー■#FFFCF3、見出しや本文には濃いグレー■#263329を合わせると、緑の鮮やかさを残しながら文字に必要な明るさの差を作れます。操作ボタンには深いグリーン■#28543Aを選び、アップルグリーンと役割を分けます。ネイビー■#1F3141は、暗い背景を使うバナーで鮮やかな緑を引き立てたいときの選択肢です。

白系と濃い色を土台にし、アップルグリーンを小さなラベルや数字の囲みに使うと、何が重要かを整理しやすくなります。似た明るい黄緑を次々に追加するより、同じ緑を必要な場所で繰り返す方が統一感を保ちやすい配色です。

商品紹介ページと告知バナーで使い分ける配色例

青果の定期便を紹介するWebページを想定します。ページ全体をアイボリー■#FFFCF3、商品カードを白■#FFFFFF、見出し・本文を濃いグレー■#263329にします。「旬のおすすめ」という短いラベルはアップルグリーン■#8DB600の背景に濃いグレー■#263329の文字を載せ、必要に応じて濃い枠線を付けます。申込みボタンは深いグリーン■#28543Aの背景と白■#FFFFFFの文字にして、ラベルと操作部分を区別します。

一方、夕方のマルシェを知らせるバナーなら、ネイビー■#1F3141を広い背景に使い、開催日時と見出しを白■#FFFFFFで示します。「今週末開催」などの短い案内だけアップルグリーン■#8DB600の帯にし、文字はネイビー■#1F3141にします。詳細を見るボタンは白■#FFFFFFの背景にネイビー■#1F3141の文字を置けば、緑の帯と役割が重なりません。

前者は写真の周囲に明るい余白を作る配色、後者は暗い面と鮮やかな緑の差を使う配色です。どちらも緑を画面全体に広げず、見出し、情報、操作のうち、どこを強調したいかを先に決めることが大切です。

文字のコントラストとアクセントの面積を確認する

文字と背景の明るさの差を数値にしたものがコントラスト比です。Webアクセシビリティの基準WCAG 2.2のAAでは、通常の文字に4.5対1以上、大きな文字に3対1以上が必要です。意味のあるアイコンなどの表示にも、隣接する色と3対1以上の差が求められる場合があります。

アップルグリーン■#8DB600の上に白■#FFFFFFの文字を載せると約2.38対1で、通常文字の基準を満たしません。濃いグレー■#263329なら約5.56対1になります。アイボリー■#FFFCF3に濃いグレー■#263329を載せた本文は約12.89対1、深いグリーン■#28543Aのボタンに白■#FFFFFFの文字を載せる場合は約8.68対1です。

ただし、アップルグリーン■#8DB600とアイボリー■#FFFCF3は約2.32対1なので、緑色の線だけで重要な区切りや状態を示すには不十分な場合があります。濃い輪郭や「おすすめ」といった文字を添えてください。ネイビー■#1F3141とアップルグリーン■#8DB600は約5.61対1の差がありますが、色だけで「申込み可能」などの意味を伝えないようにしましょう。写真に文字を重ねる場合は、その部分の背景色で改めて確認します。