ボトルグリーンとキャメルの配色例｜暗い色の面積を調整する
ボトルグリーンとキャメルを組み合わせると、深い緑をキャメルの温かい茶系色で和らげた配色を作れます。ただし、ボトルグリーンを画面いっぱいに広げると、商品写真や説明文より暗い背景が目立つ場合があります。大切なのは、2色を半分ずつ使うことではなく、見せたい情報に応じて暗い色の面積を変えることです。ここでは商品紹介ページとキャンペーンバナーの2例で比較します。
暗い緑を主役にするか、アクセントにするか決める
ボトルグリーンは深い緑、キャメルは黄みを含む茶系色として考えられます。今回はボトルグリーン#174C43とキャメル#C19A6Bを配色例に使います。どちらも色名を表す唯一の数値ではなく、制作例として選んだHEX（Webで色を指定する16進数のカラーコード）です。
ボトルグリーンは明るさを抑えた色なので、広く使えば画面の印象を強く決めます。一方、キャメルは緑より明るく、細い帯や小さなボタンにも使えます。2色のコントラスト比は約3.77：1です。コントラスト比は2色の相対的な明るさの差を示す数値で、色の組み合わせの好ましさを判定するものではありません。
色の面積比率は、写真や文字を除いた背景・帯・ボタンなどの色面を考える目安です。正解の比率があるわけではなく、写真の多さや情報量に合わせて調整します。
商品紹介ページとキャンペーンバナーの配色例
例A：革小物の商品紹介ページ。色面の目安を「アイボリー70％・ボトルグリーン20％・キャメル10％」にします。商品写真を並べる領域には明るいアイボリー#F7F3E9を広く敷き、商品名や価格は濃いチャコール#29251Fで表示します。上部の見出し帯と「商品を見る」ボタンをボトルグリーン#174C43にし、ボタン文字はアイボリー#F7F3E9にします。キャメル#C19A6Bは「新作」などの短いラベル背景や細い飾り線に使い、ラベル文字はチャコール#29251Fにします。暗い緑を小さく抑えるため、商品写真が主役のレイアウトを作りやすくなります。
この例の文字と背景のコントラスト比は、チャコール#29251Fとアイボリー#F7F3E9が約13.75：1、アイボリー#F7F3E9とボトルグリーン#174C43が約8.81：1、チャコール#29251Fとキャメル#C19A6Bが約5.88：1です。
例B：秋のキャンペーン告知バナー。「ボトルグリーン55％・アイボリー35％・キャメル10％」を出発点にします。左側の大きなボトルグリーン#174C43の面に「秋の限定企画」という短い見出しをアイボリー#F7F3E9で置き、右側のアイボリー#F7F3E9の面に日時や内容をチャコール#29251Fでまとめます。キャメル#C19A6Bは左側に置く「詳しく見る」ボタンと短い区切りに限定し、ボタン文字はチャコール#29251Fを使います。キャメルのボタン面と周囲のボトルグリーン#174C43は約3.77：1の差があり、暗い背景の中で操作場所を区別する助けになります。
キャメルの文字色と、画面幅に合わせた面積を調整する
キャメル#C19A6Bをアイボリー#F7F3E9の上に通常サイズの文字として使うと約2.34：1、キャメル#C19A6Bのボタンに白#FFFFFFの文字を置くと約2.59：1です。どちらもWCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAで通常サイズの文字に求められる4.5：1に届きません。キャメルは小さな背景面や装飾にとどめ、文字にはチャコール#29251Fなどの十分に濃い色を選びます。大きな文字の数値基準は3：1ですが、実際の文字サイズや太さも確認が必要です。
スマートフォンでは暗い緑の面が縦長に続くと、見出しと詳細が離れて見えることがあります。例Bは左右の色面を上下に組み替え、見出しの後に日時とボタンが続く順番を確認しましょう。写真の面積が増える場合は緑の帯を短くするなど、色よりも情報を優先して調整します。
HueRollではHEX入力で候補色を調整し、選択色と白・黒とのコントラストを確認できます。ただし、任意の2色の比較やWCAGの自動合否判定には対応していません。実際の文字・ボタン・背景の組み合わせは別途検証してください。