ピスタチオグリーンの配色例｜バナーの背景に合う色を探す

ピスタチオグリーンをバナーに使うとき、背景をその緑で塗るか、別の色にして差し色にするか迷うことがあります。選ぶ基準は、写真の明るさと、タイトルやボタンをどこまで目立たせたいかです。ここでは明るい背景と暗い背景の二つのバナーを比べ、色の役割と調整方法を紹介します。

背景色は写真との違いから選ぶ

ピスタチオグリーンは、少し黄みのあるやわらかな緑です。色名資料I-IROの見本は■#A4BD90で、RGB（赤・緑・青の光の量）は164・189・144です。HEX（ヘックス）は、Webの色を「#」と6桁の英数字で示す方法です。色名には別の見本もあるため、ここではI-IROの掲載値を基準にします。

茶色い木製品など、写真の主役が比較的濃い色なら、ピスタチオグリーン■#A4BD90を広い背景にすると写真と背景の色を分けやすくなります。一方、白い商品や明るい写真を主役にしたいなら、暗い緑がかったグレー■#28372Fを背景にし、ピスタチオグリーンは短いラベルへ回す方法があります。写真自体が緑色で背景と混ざる場合は、やわらかな白■#F7F6F1に切り替えて比較しましょう。

どの背景を選んでも、写真の輪郭と文字の位置を確認することが大切です。背景色が決まってから見出しとボタンの文字色を選び、鮮やかな色を追加して解決しようとしない方が、情報の優先順位を整理できます。

明るいバナーと暗いバナーの配色例

例Aは、木製の小物を紹介する「週末のクラフト市」の告知バナーです。背景をピスタチオグリーン■#A4BD90、見出しと日時を濃い緑がかったグレー■#26362Fにします。写真を囲む面にはやわらかな白■#F7F6F1を使い、木の質感を主役にします。「出店一覧を見る」ボタンは深緑■#244A3Fの背景に白■#FFFFFFの文字を載せます。

例Bは、白い陶器の新作を知らせるバナーです。背景を暗い緑がかったグレー■#28372Fにし、タイトルと説明文をやわらかな白■#F7F6F1で統一します。「新作入荷」の小さな帯にはピスタチオグリーン■#A4BD90を使い、文字は暗い緑がかったグレー■#28372Fにします。案内ボタンはやわらかな白■#F7F6F1の背景に暗い文字■#28372Fを載せ、緑の帯とボタンを別の役割にします。

例Aは緑を背景の大きな面に、例Bは短い帯に置いた配色です。いずれも写真、見出し、日時や説明、操作ボタンの順に情報を並べます。色の面積に固定の正解はないので、バナーを小さく表示したときにもタイトルと操作が見つかるかを優先しましょう。

文字と写真の境界を確認して仕上げる

文字と背景の明るさの差を数値にしたものがコントラスト比です。WCAG 2.2のAA基準では、通常の文字は4.5対1以上、大きな文字は3対1以上が必要です。操作部品や意味のある図形の識別に必要な部分には、隣接色と3対1以上の差が求められる場合があります。

例Aのピスタチオグリーン■#A4BD90に濃い文字■#26362Fを合わせると約6.21対1ですが、白■#FFFFFFの文字では約2.05対1しかなく、通常の文字には不足します。深緑■#244A3Fのボタンと白■#FFFFFFの文字は約9.88対1です。

例Bの暗い背景■#28372Fとやわらかな白■#F7F6F1の文字は約11.57対1、緑の帯■#A4BD90と暗い文字■#28372Fは約6.12対1です。一方、ピスタチオグリーン■#A4BD90とやわらかな白■#F7F6F1の色面同士は約1.89対1で、境界を色差だけで見分けるには弱めです。写真の枠が必要なら濃い線を足し、文字を写真に直接重ねる場合は、写真の明るい部分と暗い部分の両方で確認してください。