桔梗色をバナーに使うなら？文字と背景の色合わせ

桔梗色（ききょういろ）は、青みを帯びた紫色です。バナーの背景をこの色で満たす場合と、明るい背景の見出しに使う場合とでは、合う文字色が変わります。作品展と体験講座の告知を例に、文字・背景・申込ボタンの役割を整理してみましょう。

桔梗色を背景にするか、見出しに使うか決める

桔梗色の代表的なカラーコードには、■#5654A2があります。花に由来する色名ですが、色名だけで画面上の色が一意に決まるわけではありません。この記事では■#5654A2を基準にします。HEX（ヘックス）カラーコードとは、「#」と英数字で色を表すWebの表記です。ここでは6桁の形式を使います。

桔梗色を大きな背景にするときは、暗い文字を重ねるのではなく、白に近い文字を選びます。反対に、明るい背景で桔梗色を見出しに使えば、背景を広く明るく保ちながら紫を印象的に配置できます。先に「桔梗色を置く面」を決めると、本文やボタンに必要な色も選びやすくなります。

バナーで試す2つの文字と背景の組み合わせ

例1：作品展の告知は桔梗色を全面の背景に

「秋の作品展」という大きな見出しを置くなら、背景を桔梗色■#5654A2、見出しと日時を生成りに近い■#F8F6F1にします。見出しは太めに、日時は小さくして、文字の大きさで情報に優先順位を付けます。案内ボタンは生成り■#F8F6F1で塗り、ボタン内の文字は濃いグレー■#24263Aにします。ボタンの明るい面が紫の背景から分かれ、「詳細を見る」という操作が見つけやすい構成です。

例2：体験講座の募集は明るい背景に桔梗色の見出し

「初めての色選び講座」のように説明文を読んでもらうバナーでは、背景を生成り■#F8F6F1、見出しを桔梗色■#5654A2、日時・会場・注意書きを濃いグレー■#24263Aにします。申込ボタンは桔梗色■#5654A2で塗り、文字を生成り■#F8F6F1にすると、見出しとボタンに同じ紫を使いながら用途を分けられます。余白を十分に取り、説明文の周囲まで紫で囲まないこともポイントです。

文字のコントラストと実際の背景を確認する

コントラスト比は、文字と背景の明るさの差を数値で表したものです。Webコンテンツを利用しやすくするための指針「WCAG 2.2」のAA基準では、通常サイズの文字は4.5:1以上、大きな文字は3:1以上が必要です。今回の桔梗色■#5654A2と生成り■#F8F6F1の比は約6.10:1、濃いグレー■#24263Aと生成り■#F8F6F1は約13.76:1で、通常文字のAA基準を満たします。

一方、濃いグレー■#24263Aを桔梗色■#5654A2の上に載せると約2.25:1で、通常文字だけでなく大きな文字のAA基準にも届きません。また、生成り■#F8F6F1の上で文字を薄いグレー■#77768Fにすると約4.07:1に下がり、通常文字の基準を満たせません。見出しだけでなく、小さい日時や注記の色も確認しましょう。

写真やグラデーションの上に文字を置く場合は、場所によって背景が変わるため、単色同士の数値だけでは判断できません。文字の背後に単色の帯を敷くなどして、実際に接する部分で比率を確かめます。HueRollでは選んだ色と白・黒とのコントラストを確認できますが、今回の生成りと桔梗色のような任意の2色の比較は、別の方法で計算して確認する必要があります。