ラベンダーと黄色は合う？やわらかくまとめる明るさの調整
ラベンダーと黄色は、色みが違うからこそ組み合わせられる2色です。ただし、両方を淡くするとやさしい雰囲気になる一方、境目や文字がぼやけることがあります。大切なのは、どちらを背景にするかを決め、明るさと使う面積を調整することです。ここでは春の読書会の案内ページを例に、具体的な色と文字の組み合わせを見ていきます。
ラベンダーと黄色は合う？淡さをそろえるだけでは不十分
ラベンダーは青みを帯びた淡い紫、黄色は明るい暖色です。色相（赤・黄・紫など、色みの種類）が離れているため、黄色を小さく添えるとラベンダーの背景に変化を付けられます。ただし「ラベンダー」や「淡い黄色」に決まったHEXコードが一つあるわけではありません。HEXはWebの色を「#」と6桁の英数字で指定する方法です。
例えば、ラベンダーの#E6DDF0とバターのような黄色の#FBE9AEを合わせます。どちらも明るい色なので、コントラスト比（隣り合う色の明るさの差を示す数値）は約1.09:1です。色みは違っても、この2色の境界がはっきり分かれるとは限りません。
黄色を濃くするだけでなく、ラベンダーを少し深い#CAB8D9に替えると、同じ黄色#FBE9AEとの比は約1.53:1になります。面の違いは増えますが、重要な情報の区切りを色差だけに任せるにはまだ弱い組み合わせです。見出し・文字・枠線を併用すると、淡い印象を保ちながら情報を整理できます。
春の読書会ページではラベンダーを広く、黄色を小さく使う
開催案内、日時、参加内容、申込みボタンのあるページなら、ラベンダーを冒頭の広い背景にし、黄色は日程を示す小さな面に使う方法があります。両色を半分ずつ並べるより、どちらが主役かを決めやすくなります。配色の一例は次のとおりです。
- ページ冒頭：背景は淡いラベンダー#E6DDF0。見出しを深い紫灰#513E62にすると、背景とのコントラスト比は約7.21:1です。説明文にはさらに濃いチャコール#3D3547を使い、約8.88:1を確保します。
- 開催日を示す欄：淡い黄色#FBE9AEの面に「開催日」と日時を明記し、文字をチャコール#3D3547にします。この文字と黄色の比は約9.66:1です。周囲のラベンダー#E6DDF0との境界が淡いため、必要な輪郭には紫灰#6A587Aの枠線を添えます。枠線は黄色と約5.28:1、ラベンダーと約4.85:1です。
- 詳しい案内：本文の背景をオフホワイト#FCFAF7に切り替え、チャコール#3D3547の文章で持ち物や申込み方法を伝えます。ここでは黄色を増やさず、情報を読む場所として落ち着かせます。
- 申込みボタン：オフホワイト#FCFAF7の上に濃い紫#5B426Cのボタンを置き、文字は白#FFFFFFにします。文字とボタンの比は約8.60:1、ボタンと周囲の背景は約8.26:1です。
この例では、黄色は飾りではなく「日程がまとまっている場所」の背景です。色だけで意味を伝えず、「開催日」という見出しを入れ、余白も確保すると内容が探しやすくなります。
明るさを調整するときは文字と境界もセットで見直す
ラベンダーを少し濃い#CAB8D9へ変更する場合、見出しの紫灰#513E62とは約5.13:1、本文のチャコール#3D3547とは約6.32:1です。色を濃くする前と同じ文字色を使う場合も、背景を変えたら比率を再確認しましょう。
逆に、淡いラベンダー#E6DDF0に白#FFFFFFの文字を重ねると約1.32:1、淡い黄色#FBE9AEに白#FFFFFFなら約1.21:1しかありません。WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAでは、通常サイズの文字に4.5:1以上、大きな文字に3:1以上が原則必要です。やさしい色を背景に使っても、文字まで淡くする必要はありません。
HueRollでは色のHEXや配色候補を見ながら色を調整し、選択色と白・黒のコントラストを確認できます。ただし任意の2色の比較やWCAGの自動判定には対応していません。今回のラベンダーと黄色、文字・枠線などの比率は別途計算したものです。