オリーブとオレンジで作る秋の配色｜背景と差し色の組み合わせ
秋の収穫フェアや季節商品のページを作るとき、オリーブとオレンジを組み合わせると、落ち着いた緑と温かみのある差し色を一緒に使えます。ただし、両方を大きな面積に使うと、写真や文字まで暗く見えることがあります。ポイントは、背景として使う色と、目を向けてほしい場所に使う色の役割を分けることです。ここでは背景を入れ替えた2つの配色例を比べます。
オリーブを土台に、オレンジを小さな差し色として使う
この記事では、オリーブを■#3C4B32、オレンジを■#E58A34として考えます。オリーブは黄みを含む落ち着いた緑、オレンジは赤と黄の間にある暖色です。どちらも色名だけで唯一のコードが決まるわけではなく、今回の組み合わせはWeb向けの一例です。HEX（ヘックス）は、画面で使う色を「#」と6桁の英数字で表すカラーコードです。
オリーブの■#3C4B32は暗めで彩度（色の鮮やかさ）も控えめなので、見出しや背景のまとまった面に向きます。オレンジの■#E58A34はそれより明るく、色みも異なるため、開催日を示す飾りや申込ボタンなど、小さな範囲に絞ると役割がはっきりします。
色の印象だけで組み合わせを決めず、文字を置く面にはクリーム■#F8F3EA、本文には濃いブラウン■#312A23も用意しておくと、季節感を出しながら情報を整理しやすくなります。
秋の収穫フェアで背景を入れ替えた2つの配色例
野菜や焼き菓子を紹介する「秋の収穫フェア」のWebページを想定します。写真、開催日、商品の説明、申込ボタンを同じ画面に置く場合でも、背景色の選び方で色の使い方が変わります。
明るい背景で写真を主役にする場合
- ページ背景：クリーム■#F8F3EAを広く使い、商品写真の周囲に明るい余白を作ります。
- 見出し・日付の文字：オリーブ■#3C4B32。秋らしい色を文字に取り入れつつ、背景との差を確保します。
- 本文：濃いブラウン■#312A23。商品の説明や会場案内に使用します。
- 差し色：オレンジ■#E58A34を写真脇の短い帯や開催日の目印に使います。
- 申込ボタン：オレンジ■#E58A34の面に濃いブラウン■#312A23の文字を載せ、外側にはオリーブ■#3C4B32のはっきりした枠線を付けます。
濃い背景でイベント告知を引き締める場合
ページ冒頭の告知エリアだけオリーブ■#3C4B32で大きく塗り、見出しと開催日をクリーム■#F8F3EAで表示します。申込ボタンはオレンジ■#E58A34と濃いブラウン■#312A23の文字を維持します。濃い背景の中に明るいボタンを一つ置くことで、商品写真と案内文が競合しすぎない配置を目指せます。詳しい商品説明の部分はクリーム■#F8F3EAの背景に戻すと、濃い面がページ全体に続くのを避けられます。
背景とボタンの境界、文字のコントラストを確認する
コントラスト比は、文字と背景など隣り合う色の明るさの差を表す数値です。今回のクリーム■#F8F3EAとオリーブ■#3C4B32は約8.46:1、クリーム■#F8F3EAと濃いブラウン■#312A23は約12.79:1です。オリーブを文字にする場合も、濃い背景にクリームの文字を置く場合も、通常サイズの文章で使える差を確保できます。
オレンジ■#E58A34のボタンと濃いブラウン■#312A23の文字は約5.39:1です。一方、白■#FFFFFFの文字と同じオレンジ■#E58A34は約2.62:1しかなく、WCAG 2.2のレベルAAが通常サイズの文字に求める4.5:1には届きません。明るいオレンジだからといって白文字を選ばないことが大切です。
ボタンの面と周囲の比較も必要です。オレンジ■#E58A34とオリーブ■#3C4B32は約3.57:1ですが、オレンジ■#E58A34とクリーム■#F8F3EAは約2.37:1です。後者は3:1を下回るため、明るい背景ではオリーブ■#3C4B32の枠線を追加します。操作部品を認識するために必要な境界には、WCAG 2.2の非テキストコントラスト基準として隣接色と3:1以上が求められる場合があります。
写真にオレンジ色の食材や紅葉が多い場合は、装飾用オレンジの量を減らしてみましょう。背景、見出し、本文、ボタンの役割を維持しながら面積を調整すると、秋の雰囲気と情報の見つけやすさを両立させやすくなります。