緑と茶色の配色に何色を足す？自然な印象を保つアクセント選び

緑と茶色は植物や木を連想させる配色ですが、2色とも暗いとWebページやバナーが重く見えることがあります。3色目には、明るい生成り、落ち着いた黄色、淡い青緑などが候補です。今回は同じ緑と茶色を使い続け、加える1色とその置き方を変えて、自然な雰囲気を残す方法を比較します。

緑と茶色に足す色は、明るさと使う場所で決める

基準にするのは深緑■#315C45と焦茶■#604434です。HEX（Web上の色を16進数で指定するコード）は、この記事で比較するために選んだ値です。2色のコントラスト比は約1.16:1で、緑の背景に茶色の小さな文字を直接置いても、明るさの差は十分ではありません。

そこで、3色目は緑と茶色を無理に重ねずに使える色から選びます。彩度（色の鮮やかさ）を抑えた明るい候補なら、落ち着いた緑と茶色を主役として残しやすくなります。

• 生成り■#F5EFE2：広い背景や余白を明るくしたいとき。
• 落ち着いた黄■#E8CF86：暗い緑の中でイベント名や申込みを目立たせたいとき。
• 淡い青緑■#D9E9E5：植物の案内に少し涼しげな変化を加えたいとき。

3色目を変えたWeb配色とバナーの具体例

生成りを足す：野菜の定期便サイト

背景は生成り■#F5EFE2、見出しは深緑■#315C45、説明文は焦茶■#604434にします。「内容を見る」ボタンは深緑■#315C45で塗り、文字を生成り■#F5EFE2にします。明るい面積を広く取ることで、商品写真と文章の間に余白を作る案です。

生成り背景に対する深緑の見出しは約6.67:1、焦茶の説明文は約7.72:1です。ボタンの文字と背景も約6.67:1になります。

落ち着いた黄を足す：森の収穫市バナー

深緑■#315C45を大きな背景に使い、見出しと短い説明を落ち着いた黄■#E8CF86にします。案内ボタンも黄■#E8CF86で塗り、その文字だけを焦茶■#604434にします。黄を暗い緑の上で目印として使い、茶色は明るいボタン面に限定する構成です。

黄の文字と深緑背景は約4.99:1、焦茶のボタン文字と黄の背景は約5.77:1です。茶色の文字を緑の背景に直接置かないことがポイントです。

淡い青緑を足す：園芸講座の案内ページ

背景を淡い青緑■#D9E9E5にして、見出しを焦茶■#604434、説明文を深緑■#315C45にします。「講座を確認」ボタンは焦茶■#604434を背景に、文字には淡い青緑■#D9E9E5を使います。やわらかい寒色を広く使い、茶色で重要な操作を区切る案です。

焦茶の見出しと淡い青緑背景は約7.05:1、深緑の説明文と同じ背景は約6.09:1です。見出しと本文の重要度は色だけでなく、文字の大きさや太さでも区別します。

自然な印象を保ちながら文字とボタンを確認する

3色を同じ面積ずつ置く必要はありません。背景を明るくしたいなら生成りか淡い青緑を広く使い、暗い背景の短い告知なら黄色を見出しやボタンに使います。写真の葉や土の色が濃い場合には、装飾の色数をさらに抑え、余白を確保すると整理しやすくなります。

文字のコントラスト比は、文字とそのすぐ後ろの背景の明るさの差です。WCAG（Web Content Accessibility Guidelines、Webコンテンツのアクセシビリティ指針）2.2のAA（適合レベルの一つ）では、通常サイズの文字は原則4.5:1以上、規定の大きな文字は3:1以上が基準です。操作部品の識別に必要な境界などは、隣接色との3:1以上が求められる場合があります。色だけで申込みの意味を示さず、ボタンには動作を表す文字も入れましょう。

HueRollではHEX入力による色の調整や、選択色と白・黒とのコントラスト確認ができます。ただし任意の2色の直接比較やAA適合の自動判定はできません。ここで示した緑・茶色・3色目の比率は別途計算したものです。背景、文字、ボタンの組み合わせを完成した画面でも確かめましょう。