白茶とはどんな色？読み方とカラーコード

白茶は何と読み、どのような色なのでしょうか。日本の伝統色にある白茶は、白みを含んだ明るい薄茶色です。色見本の数値は資料によって違うため、読み方と代表的なカラーコードを確かめたうえで、Webサイトの背景・見出し・ボタンに使う配色例を紹介します。

白茶の読み方と色の特徴

白茶は「しらちゃ」と読みます。「白」は真っ白という意味ではなく、茶色が白みを帯びたような淡さを表しています。灰みや黄みを含む柔らかな茶色で、濃い焦茶とは明るさが異なります。英語では色名をShirachaと表すと、日本の和色であることが伝わりやすくなります。

カラーコードは資料ごとに異なります。和色大辞典では白茶を■#DDBB99、I-IROでは■#CBA785として紹介しています。HEX（ヘックス）は、Webの色を16進数で指定するコードです。どちらも白茶の色見本ですが、I-IROの見本のほうがやや暗く、灰みを感じる落ち着いた茶色です。伝統色の名前が一つの数値に固定されているわけではないため、使用する色を決めたらコードを統一しましょう。

白茶を使うWebサイトとバナーの配色例

器のオンラインショップ：見出し帯に白茶を使う

陶器や食器の紹介ページでは、全体の背景を暖かいオフホワイト■#FAF8F4、本文を濃い茶灰■#332E2Aにします。商品の特徴をまとめる見出し帯に白茶■#DDBB99を使い、帯の上にも同じ濃い文字を載せます。文字と帯のコントラスト比（2色の明るさの差）は約7.44:1、文字とオフホワイトは約12.65:1です。明るい余白が写真を囲み、白茶が情報のまとまりを示します。

商品を見るボタンは濃い青緑■#20565Bに白■#FFFFFFの文字を合わせると、文字との比は約8.26:1、オフホワイトの周囲との比は約7.78:1です。見出し帯と背景の差は約1.70:1と小さいため、区切りを明確にする必要がある場合は灰茶■#736153の枠線を足します。この線は白茶に対して約3.27:1、オフホワイトに対して約5.56:1です。

展示会の告知バナー：明るい白茶を背景にする

工芸品の展示会を知らせるバナーでは、I-IROの少し濃い白茶■#CBA785を広い背景に使います。タイトルは濃い茶色■#46372Dとし、背景との比は約5.10:1です。会期と会場は白■#FFFFFFの情報カードにまとめ、文字を濃い茶灰■#332E2Aにすれば約13.42:1となります。色数を増やさずに、情報の置き場所を分ける方法です。

白いカードと白茶の背景は約2.23:1と近いため、境界が重要なら濃い灰茶■#604F48の枠を使います。枠と白茶の比は約3.47:1、白との比は約7.75:1です。「詳細を見る」ボタンは濃い青灰■#365165に白■#FFFFFFの文字を合わせると約8.33:1で、ボタンと白茶の周囲にも約3.73:1の差が生まれます。

白茶の淡さを生かしながら読みやすさを保つ

和色大辞典の白茶■#DDBB99と白■#FFFFFFの比は約1.80:1、I-IROの白茶■#CBA785と白は約2.23:1です。どちらも通常の文章を白文字で載せるには明暗差が足りません。2種類の白茶同士も約1.24:1しか違わないため、その差だけで重要な状態を示さず、文字や枠、余白を添えましょう。

WCAG 2.2（Webコンテンツのアクセシビリティに関するガイドライン）のレベルAAでは、通常サイズの文字と背景に4.5:1以上、大きな文字に3:1以上のコントラスト比が必要です。操作部品や意味のある図形を識別する重要な視覚情報は、隣接色との3:1以上が必要になる場合があります。HueRollではHEXで色を指定して配色候補を探し、選択色と白・黒の比を確認できます。ただし任意の2色の比較やAA・AAAの自動判定はできないため、完成した組み合わせは別途検証してください。