葡萄色と生成り色の組み合わせ｜見出しを引き立てる色使い

葡萄色（えびいろ）と生成り色を合わせると、明るい背景の中に深い赤紫の見出しを置く配色が作れます。ただし、見出しだけを濃くしても、本文や囲み欄との関係が整っていなければ読み進めにくくなります。色の役割を決め、長いWeb記事で見出しを自然に引き立てる方法を紹介します。

生成り色を広い背景に、葡萄色を見出しに使う

葡萄色は「えびいろ」と読み、「ぶどういろ」と呼ばれる場合もある、暗い赤紫系の色名です。色見本には幅があるため、ここでは参考色として■#6C1C4Fを選びます。生成り色（きなりいろ）は、染めたり漂白したりしていない布の色にちなむ、黄みを帯びた白系の色です。今回は■#F5EBDCを使います。これらは色名に唯一決まった数値ではなく、この記事の配色例です。

Webの色を指定するHEX（ヘックス）は、「#」と6桁の英数字を使う表記です。葡萄色■#6C1C4Fは背景の生成り色■#F5EBDCより十分暗く、見出しと余白に明るさの差を作れます。一方、本文はやや柔らかい濃色■#332C30にすると、見出しだけを赤紫にしたときの色の役割が明確になります。

見出しの文字色を葡萄色にしても、同じ色で枠やボタンを増やしすぎないことがポイントです。使う場所を限定するほど、色の違いに意味を持たせやすくなります。

読み物ページで見出しを引き立てる具体例

例えば、地域のワイナリーが「ぶどう畑の一年」を紹介する読み物ページを想定します。冒頭から本文まで生成り色■#F5EBDCを基本背景にし、記事タイトルと「春の手入れ」「秋の収穫」などの大きな見出しを葡萄色■#6C1C4Fにします。本文の説明は濃いグレー系■#332C30で統一します。

• 大きな見出し：葡萄色■#6C1C4Fを文字に使い、前後に余白を取って話題の区切りを示す。
• 小見出し：本文と同じ濃色■#332C30を使い、太さや文字サイズで段階を分ける。
• 補足欄：薄い赤紫■#E9DDE4を背景にし、葡萄色■#6C1C4Fで短い見出しを付ける。
• 詳しい案内へのボタン：葡萄色■#6C1C4Fを背景に、生成り色■#F5EBDCで「見学案内を見る」と表示する。

長い文章では、大きな見出しのたびに背景を切り替えるより、同じ生成り色を続けて余白で区切るほうが、読む流れを保ちやすい場合があります。補足欄だけを淡い色にしても、文章や枠の位置をそろえればページ全体を整理できます。

見出しの読みやすさと淡い背景の境界を確認する

文字と背景の明るさの差を数値で示したものがコントラスト比です。Webのアクセシビリティ基準WCAG 2.2のAAでは、通常の文字は4.5対1以上、大きな文字は3対1以上が必要です。

葡萄色■#6C1C4Fの見出しと生成り色■#F5EBDCの背景は約9.29対1、濃色■#332C30の本文と同じ背景は約11.53対1です。補足欄でも、葡萄色■#6C1C4Fと薄い赤紫■#E9DDE4は約8.31対1となり、いずれも通常文字の基準を上回ります。

葡萄色■#6C1C4Fのボタンに生成り色■#F5EBDCの文字を載せても約9.29対1です。ただし、薄い赤紫■#E9DDE4と生成り色■#F5EBDCの背景同士は約1.12対1と差が小さく、色だけでは補足欄の境界を十分に示せません。余白、枠線、見出しの位置も使って区別しましょう。画面の明るさや文字サイズを変えても、情報の順番が分かるか確認することが大切です。