セージグリーンとベージュに合う差し色は？配色に変化をつける方法
セージグリーンとベージュは、彩度を抑えた落ち着いた配色を作りやすい組み合わせです。ただし、2色を並べるだけでは、見出しや購入ボタンが背景に埋もれる場合があります。差し色を決めるときは、まず「何を目立たせたいか」を一つ選びましょう。この記事では布小物を販売するオンラインショップを例に、温かみを加える赤茶色と、引き締め役になる濃い青色の2案を比べます。
セージグリーンとベージュには赤茶色か濃い青を少量足す
セージグリーンはハーブのセージの葉を思わせる、灰みを帯びた緑色です。今回は見本の一例として#9CAF88を使います。合わせるベージュは黄みのある#E3D5C0です。これらは参考用の値で、色名だけでカラーコードが一つに決まるわけではありません。HEX（ヘックス）はWebで色を6桁の英数字で指定するコードです。
セージグリーン#9CAF88とベージュ#E3D5C0のコントラスト比は約1.63:1です。コントラスト比とは、隣り合う色の明るさの差を数値で示したものです。緑とベージュという色みの違いはあっても、2色だけで重要な境界を見せるには差が小さくなります。文字には濃い緑がかった黒#25352Bを選ぶと、セージグリーンの上で約5.49:1、ベージュの上で約8.96:1を確保できます。
温かい印象を加えたい場合の差し色には赤茶色#813C32、すっきりと引き締めたい場合には濃い青#305165を提案します。赤茶色とセージグリーン#9CAF88の比は約3.39:1、濃い青とセージグリーンの比は約3.57:1です。色の印象は写真や面積によって変わるので、2つの差し色を同時に増やすより、サイトの目的に応じてどちらか一方を主なアクセントにします。
布小物ショップで背景と差し色の役割を変える2案
案1：セージグリーンを背景に、赤茶色の購入ボタンを置く。「手仕事の布ポーチ」という商品紹介の背景をセージグリーン#9CAF88にし、見出しと説明を濃い緑がかった黒#25352Bで表示します。文字と背景は約5.49:1です。「商品を購入する」ボタンは赤茶色#813C32の背景に白#FFFFFFの文字を載せると約8.00:1になり、ボタン自体も周囲のセージグリーンと約3.39:1で区別できます。
素材やお手入れ方法はベージュ#E3D5C0の案内欄にまとめ、文字を濃い緑がかった黒#25352Bにすると約8.96:1です。ただし案内欄とセージグリーン#9CAF88の差は約1.63:1なので、独立した領域として見せたい場合は灰茶色#5A5549の枠を2px程度付けます。この枠は外側のセージグリーンと約3.14:1、内側のベージュと約5.14:1です。
案2：ベージュを背景に、濃い青のボタンで引き締める。同じ商品のギフト向け紹介では背景をベージュ#E3D5C0に替え、見出しと説明を濃い緑がかった黒#25352Bにすると約8.96:1です。「ギフト包装を選ぶ」ボタンは濃い青#305165に白#FFFFFFの文字を載せて約8.43:1。ボタンと周囲のベージュの差も約5.84:1です。
配送日や在庫状況をセージグリーン#9CAF88の小さな案内欄にまとめ、文字には濃い緑がかった黒#25352Bを使うと約5.49:1になります。ベージュとの境界は約1.63:1なので、必要なら灰茶色#5A5549の枠を加えます。枠と内側のセージグリーンは約3.14:1、外側のベージュとは約5.14:1です。商品説明を明るいオフホワイト#FAF8F2に分ける場合、本文を濃い緑がかった黒#25352Bにすれば約12.19:1ですが、オフホワイトとベージュの差は約1.36:1なので、境界の見せ方も考えます。
淡い背景の白文字と、差し色だけの状態表示に注意する
セージグリーン#9CAF88に白#FFFFFFの文字を載せた場合は約2.36:1、ベージュ#E3D5C0に白文字を載せると約1.44:1です。どちらも通常の文字や大きな見出しには十分ではありません。また、赤茶色#813C32と濃い青#305165は互いのコントラスト比が約1.05:1なので、「在庫あり」「売り切れ」を2色の差だけで伝えず、言葉や形を添えましょう。
WCAG 2.2というWebのアクセシビリティ指針のレベルAAでは、通常サイズの文字に原則4.5:1以上、大きな文字に3:1以上が求められます。操作に必要な枠など、文字以外の重要な表示も隣接色との3:1以上が必要な場合があります。装飾だけの線には同じ基準が当てはまらない場合もありますが、細すぎる枠は見えにくいので実際の表示で確認します。
HueRollではHEX入力で色を調整し、選んだ色と白・黒とのコントラスト比を確認できます。ただし任意の2色同士の比較やAA・AAAの自動判定には対応していません。完成した画面では、背景・文字・ボタン・案内欄の実際に接する色の組み合わせを別途確認してください。