シャンパンベージュに合う色は？文字色と差し色の配色例
シャンパンベージュは、黄みを含む明るいベージュです。Webページの背景に広く使うときは、似た明るさの文字や差し色を重ねると、全体がぼやける場合があります。まず濃い文字色を決め、そのうえで深緑や赤紫などからアクセントを1色選ぶと、やわらかな背景と重要な操作を分けやすくなります。この記事では花の定期便を紹介するページを例に、背景・見出し・ボタンの具体的な組み合わせを比較します。
シャンパンベージュには濃い文字色と少量の差し色を合わせる
シャンパンベージュという色名は、淡い黄みと茶色みのあるニュートラルな色の呼び名で、共通のカラーコードが一つに定まっているわけではありません。ある色見本では#E3D0B0、別の色見本では#DBC4A0が使われています。後者は今回の前者よりやや暗い見本です。この記事ではシャンパンベージュ#E3D0B0を基準にします。HEX（ヘックス）は、Web上の色を6桁の英数字で示すコードです。
基準色のRGBは赤227・緑208・青176です。RGB（アールジービー）は、画面上の色を赤・緑・青の光の成分で表す形式で、それぞれ0〜255の値を取ります。赤と緑の値が青より高いため、黄みを感じる明るいベージュです。見本同士#E3D0B0と#DBC4A0のコントラスト比は約1.12:1にとどまるので、わずかな濃淡だけで情報の種類を区別しないようにします。
見出し・本文には濃いこげ茶#332B28を合わせます。基準のシャンパンベージュ#E3D0B0に対して約9.17:1のコントラスト比があり、小さい文字にも使う候補になります。コントラスト比は文字と背景など、隣り合う色の明るさの差を示す数値です。差し色には深緑#24574Cまたは深いワイン系の赤紫#81374Aを選ぶと、基準色との比がそれぞれ約5.47:1、約5.40:1になります。ただし色の印象は商品写真や使用面積によって変わるため、2色を同時に増やすのではなく、どちらか1色を主なアクセントにします。
花の定期便ページで文字色と差し色を使い分ける2案
案1：シャンパンベージュの背景に深緑のボタンを置く。花の定期便の紹介エリアをシャンパンベージュ#E3D0B0にし、「季節の花を毎月お届け」という見出しと説明をこげ茶#332B28で表示します。文字と背景の比は約9.17:1です。「定期便を申し込む」ボタンは深緑#24574Cの背景に、オフホワイト#FAF8F4の文字を載せます。ボタン内の文字は約7.79:1、ボタンと周囲のシャンパンベージュの差は約5.47:1です。深緑をボタンに集め、案内文には使いすぎない構成です。
配送頻度や花束のサイズは、オフホワイト#FAF8F4のカードにまとめ、こげ茶#332B28で表示すると約13.05:1になります。ただしカードと外側のシャンパンベージュ#E3D0B0の差は約1.42:1と小さめです。カードの輪郭が必要なら、灰みの茶色#78664Fの枠を付けます。枠は外側のシャンパンベージュと約3.65:1、内側のオフホワイトとは約5.19:1です。
案2：明るい背景にシャンパンベージュの情報欄を置く。ギフト用の花束を紹介するページでは、広い背景をオフホワイト#FAF8F4にし、見出しと説明をこげ茶#332B28にします。文字と背景は約13.05:1です。ギフト包装や配送日の案内欄だけをシャンパンベージュ#E3D0B0にして、同じこげ茶の文字で約9.17:1を確保します。必要な案内欄には灰みの茶色#78664Fの枠を付け、外側のオフホワイトと約5.19:1、内側のベージュと約3.65:1の差を作ります。
「ギフトを見る」ボタンはワイン系の赤紫#81374Aの背景にオフホワイト#FAF8F4の文字を載せます。文字とボタン背景は約7.68:1、ボタンと周囲のオフホワイトも約7.68:1です。ワイン系の色をボタンだけに使い、最初の案と差し色の役割を比較できます。
白文字と淡い背景同士の境界には注意する
シャンパンベージュ#E3D0B0に白#FFFFFFの文字を載せると、コントラスト比は約1.51:1です。明るい色同士なので、見出しを白にするのではなく、こげ茶#332B28などの濃い色を選びます。また、深緑#24574Cとワイン系の赤紫#81374Aは明るさが非常に近く、2色間の比は約1.01:1です。この2色だけで申込み状況などの状態を分けず、文字や形も使いましょう。
WCAG 2.2というWebコンテンツのアクセシビリティ指針のレベルAAでは、通常サイズの文字は原則4.5:1以上、大きな文字は3:1以上のコントラスト比が必要です。操作に必要な枠など、文字以外の重要な表示は隣接色との3:1以上が必要な場合もあります。細い枠は数値を満たしても見えにくいことがあるため、実際の表示も確認してください。
HueRollではHEXで色を調整し、選択色と白・黒とのコントラストを確認できます。ただし任意の2色同士の比較やAA・AAAの自動判定には対応していません。最終的な背景・文字・ボタン・枠の組み合わせは別途確認しましょう。