ミルクティー色の背景に合う文字色｜やわらかさと読みやすさを両立する

ミルクティー色をWebページの背景にすると、やわらかな雰囲気を作れます。一方、白文字や淡い茶色の文字を重ねると、商品名や細かな案内が読みにくくなることがあります。背景のやさしさを保つには、文字まで淡くするのではなく、見出し・本文・補足情報に適した濃さを選ぶことが大切です。架空の茶葉ギフト紹介ページを例に、背景の明るさを変えながら比較します。

ミルクティー色の背景には濃いブラウン系の文字を合わせる

ミルクティー色は、ベージュや薄茶に近い色合いの呼び名ですが、決まった一つのカラーコードがあるわけではありません。制作時は背景の色を具体的に決め、そこに載せる文字色を選びます。HEXコードとは、Webで色を指定する「#」と6桁などの数字・英字の組み合わせです。

文字色を選ぶときは、色みの相性だけでなく、文字と背景の明るさの差を見る必要があります。この差を数値にしたものがコントラスト比です。背景と同系統のブラウンでも、十分に濃くすれば落ち着いた印象を保ちながら文字を区別できます。

見出しには少し赤みのある濃いブラウン、長い説明には黒に近いブラウン、日付や注記には本文より控えめでも必要な明暗差を確保した色を使うと、役割を分けられます。文字を薄くして強弱を作るより、太さ・大きさ・余白も組み合わせて調整しましょう。

茶葉ギフト紹介ページで背景の濃さを2通り比較する

明るいミルクティー色なら補足文字にも少し幅を持たせられる

ページ背景を明るいミルクティー色の■#EADBC8にします。商品見出しを濃いブラウンの■#493A32、説明文をチャコール寄りの■#302B28にすると、背景とのコントラスト比はそれぞれ約7.99:1、10.30:1です。配送方法や内容量などの補足情報には■#615146を使えます。この組み合わせも約5.58:1で、本文より控えめな色ながら明暗差を残せます。

「ギフトの内容を見る」ボタンは背景を深いブラウンの■#5B4036、文字を白の■#FFFFFFにします。ボタン内の文字と背景の比は約9.41:1、ボタン背景とページのミルクティー色■#EADBC8との比は約6.93:1です。背景をやわらかく保ちつつ、操作する場所を独立させられます。

少し濃い背景では補足文字も一段濃くする

背景を少し濃いミルクティー色の■#D9C2A8に変更した場合、同じ見出し■#493A32と本文■#302B28の比は約6.32:1、8.14:1になります。どちらも通常の文字に必要な差を保てますが、先ほどの補足色■#615146との比は約4.41:1に下がります。

そこで補足情報も■#5B4036に変更すると約5.48:1になります。背景を濃くしたのに文字をそのままにすると、細かな情報から読みにくくなりやすいためです。商品名、説明、発送案内という情報の優先順位は、文字の色だけでなく見出しの太さや間隔でも表しましょう。

白文字や写真上の文字は実際の背景で確認する

白の■#FFFFFFは、明るいミルクティー背景■#EADBC8とは約1.36:1、濃い方の■#D9C2A8とも約1.72:1です。どちらも通常の本文には使えません。白は濃いボタン上の文字など、十分に暗い背景がある箇所で使います。

WCAG（Web Content Accessibility Guidelines、Webコンテンツの利用しやすさに関する指針）2.2のレベルAAでは、通常サイズの文字と背景に4.5:1以上、規定の大きな文字には3:1以上のコントラスト比が必要です。計算上の比が基準を超えても、細すぎる文字や小さすぎる文字が必ず読みやすくなるわけではありません。スマートフォンでの表示や、文字が写真・半透明の色の上に載る場合も確認しましょう。

HueRollではHEXコードを入力して濃淡や配色候補を比較し、選択色と白・黒のコントラストを確認できます。ただし、任意の2色間の比率やAA判定の自動確認には対応していません。ここで示した数値は不透明な2色の組み合わせを別途計算したものです。背景の色を決めた後に文字を一組ずつ確かめることで、ミルクティー色の穏やかさと情報の読みやすさを両立しやすくなります。