緑と白茶を合わせる配色｜背景と見出しに使う色の濃さ

緑と白茶（しらちゃ）は、深い緑で見出しを引き締め、白茶の温かみを背景に使うと組み合わせやすい配色です。ただし、緑を明るくしすぎると白茶との明るさの差が小さくなり、文字が目立たなくなることがあります。背景と見出しの色を入れ替えた2つの例で、適した濃さと使う面積を考えます。

白茶の明るさに合わせて、緑の濃さを決める

白茶は「しらちゃ」と読み、白みを帯びた薄い茶色を指す日本の色名です。Webで使える見本には、明るめの白茶■#DCC4A0や、少し濃い白茶■#BC9F77があります。色名に決まった1つのカラーコードがあるわけではありません。この記事では■#DCC4A0を基準にします。HEX（ヘックス）カラーコードは「#」と英数字で画面上の色を表す形式で、ここでは6桁を使用します。

白茶は黄みを含む明るい色なので、見出しには深緑■#244B3Bを合わせると明るさの差を作れます。一方、少し明るい緑■#678B70を選ぶと穏やかな組み合わせにはなりますが、文字としての区別は弱くなります。広い面には白茶、情報の中心には深緑という役割から考えると、色を増やしすぎずに整えられます。

背景と見出しを入れ替えた2つの配色例

例1：園芸教室の募集ページは白茶を背景にする

教室の募集ページでは、背景を白茶■#DCC4A0で広く取り、「季節の寄せ植え講座」の見出しを深緑■#244B3Bにします。概要や会場の説明には濃い灰緑■#29352Dを使い、日時をまとめたカードの背景だけを明るい生成り■#FFF9EEに変えます。カードの文字も濃い灰緑■#29352Dです。申込ボタンは深緑■#244B3Bで塗り、文字を生成り■#FFF9EEにすると、見出しと操作部分を同じ緑で揃えながら区別できます。

白茶と生成りは近い明るさです。日時のカードを背景からはっきり区別する必要がある場合は、カードに深緑■#244B3Bの枠を添えるなど、淡い色同士の差だけに頼らないようにします。

例2：森林写真の展示バナーは深緑を背景にする

写真展の告知では、深緑■#244B3Bを背景に広く使い、「森の風景写真展」の見出しを白茶■#DCC4A0にします。開催日と短い説明は、さらに明るい生成り■#FFF9EEで載せると情報の段階を作れます。「展示を見る」ボタンは白茶■#DCC4A0を背景にして、文字を深緑■#244B3Bにします。写真の色が豊かな場合、白茶の飾り線は短くし、装飾が写真と競合しないように調整します。

例1は白茶を大きく、例2は深緑を大きく使います。同じ2色でも背景を交換するだけで見出しの見せ方が変わるため、写真の明るさや文章量に合わせて比較してみてください。

薄い緑を文字や操作の枠に使う前に確認する

文字と背景の明るさの差を示す数値がコントラスト比です。Webコンテンツのアクセシビリティ指針「WCAG 2.2」のAA基準では、通常サイズの文字に4.5:1以上、大きな文字に3:1以上が必要です。深緑■#244B3Bと白茶■#DCC4A0は約5.80:1、濃い灰緑■#29352Dと白茶■#DCC4A0は約7.58:1です。また、深緑■#244B3Bと生成り■#FFF9EEは約9.34:1で、いずれも通常文字の基準を満たします。

対して明るめの緑■#678B70と白茶■#DCC4A0は約2.26:1で、大きな文字のAA基準にも届きません。白茶■#DCC4A0と生成り■#FFF9EEも約1.61:1と差が小さいため、カードやボタンの存在を伝える唯一の境界には向きません。操作に不可欠な枠やアイコンは、隣接する色に対し原則3:1以上の差を確認し、装飾だけの線とは分けて扱います。

HueRollでは選択色と白・黒のコントラストを確認できますが、深緑と白茶のような任意の2色の比較やAAの自動判定はできません。実際に接する色同士を別途計算してから採用してください。