群青色と山吹色の配色｜強調する色を決めるコツ

群青色と山吹色をバナーに使うときは、まず何を最も強調するか決めましょう。青と黄色を同じ面積で並べるよりも、群青色を背景や見出しの基本色とし、山吹色を一つの重要な情報に絞ると役割を整理できます。ここでは地域ギャラリーの「和紙の版画体験会」を例に、申込みと開催日のどちらを目立たせるかで配色を比較します。

群青色を土台に、山吹色を使う場所を決める

今回の群青色（ぐんじょういろ）の見本は■#4C6CB3、山吹色（やまぶきいろ）は■#F8B500です。群青色は日本画の岩絵具に由来する青系の色名、山吹色はヤマブキの花を思わせる赤みのある黄色です。色名に対応する見本は資料によって異なるため、ここではこの2色を使います。HEX（ヘックス）はWebの色を6桁の英数字で指定するコードです。

群青色■#4C6CB3と山吹色■#F8B500のコントラスト比は約2.83:1です。コントラスト比は隣り合う色の明るさの差を示す数値です。2色の色みは大きく違っても、群青色に黄色い文字を重ねると、大きな文字に求められる3:1にも届きません。

群青色の背景には白■#FFFFFFの文字を合わせると約5.12:1、山吹色の背景には濃紺■#101C32の文字を合わせると約9.40:1になります。山吹色を目立たせる場合は、文字だけでなく背景・枠・面積を含めて配置を考えます。

版画体験会の告知で強調する情報を入れ替える

案1：申込みボタンを主役にする。バナーの背景を群青色■#4C6CB3にし、「和紙の版画体験会」の見出し、開催日、会場を白■#FFFFFFで表示します。文字と背景の比は約5.12:1です。「参加を申し込む」ボタンだけを山吹色■#F8B500で塗り、文字を濃紺■#101C32にすると約9.40:1になります。

山吹色のボタンと群青色の背景の差は約2.83:1なので、必要な輪郭を補うため濃紺■#101C32の枠を2px程度付けます。この枠と群青色■#4C6CB3の比は約3.32:1、枠と山吹色■#F8B500は約9.40:1です。黄色を申込みの場所に集中させ、見出しや日時は白で統一します。

案2：開催日を主役にする。背景を白■#FFFFFFに変え、見出しを群青色■#4C6CB3、説明を濃紺■#101C32にします。白との比は見出しが約5.12:1、本文が約17.02:1です。「11月開催」などの日付を山吹色■#F8B500の小さな帯に載せ、濃紺■#101C32で文字を表示すると約9.40:1になります。

山吹色と白■#FFFFFFの比は約1.81:1なので、帯の境界が必要なら濃紺■#101C32の枠を加えます。枠と外側の白は約17.02:1です。申込みボタンは群青色■#4C6CB3の背景に白■#FFFFFFの文字を載せて約5.12:1とし、黄色を開催日の案内だけに使います。

文字とボタンの境界を確認し、色だけで伝えない

山吹色■#F8B500に白■#FFFFFFの文字を載せると約1.81:1、群青色■#4C6CB3に山吹色■#F8B500の文字を載せると約2.83:1です。どちらも見出しや本文に使う組み合わせには向きません。「受付中」「受付終了」などの状態も色だけで区別せず、文字と形で伝えましょう。

WCAG 2.2（Webコンテンツのアクセシビリティ指針）のレベルAAでは、通常サイズの文字に原則4.5:1以上、大きな文字に3:1以上が必要です。操作に必要な枠や状態表示など文字以外の重要な情報にも、隣接色との3:1以上が必要な場合があります。細い枠は数値を満たしても見えにくいことがあるため、実際の線幅と表示も点検します。

HueRollではHEXを入力し、選んだ色と白・黒とのコントラスト比を確認できます。ただし任意の2色間の比較やAA・AAAの自動判定には対応していません。使用する背景・文字・ボタン・枠を実際の組み合わせで別途確認してください。