菜の花色で作る春のバナー｜背景と差し色の配色例

菜の花色（なのはないろ）は、春に咲く菜の花を思わせる明るい黄色です。春のイベント告知バナーに使うと季節感を出しやすい一方、白い文字や薄い背景を重ねると情報が埋もれがちです。この記事では菜の花色の一例を■#FFEC47として、「背景に広く使う」「差し色に絞る」という2つの配色を比べます。HEX（ヘックス）はWeb上の色を英数字で表すコードです。菜の花色のHEX値は資料により違うため、ここでは1つの色見本として扱います。

黄色を背景にするか、差し色にするかを決める

菜の花色■#FFEC47は明るく鮮やかなため、面積を広げるとバナー全体の主役になります。春らしい明るさを前面に出したい催しでは背景に、写真やイベント名を主役にしたい場合は日付や申込み部分の差し色にすると、情報の優先順位を整理しやすくなります。

組み合わせる色は、黄みのあるオフホワイト■#FFF9EB、落ち着いた深緑■#315B44、暗い緑がかったチャコール■#263B2Dなどが候補です。黄色と淡い背景の明るさは近いので、隣り合わせにする場所では間に暗色を挟むと輪郭が出ます。深緑やチャコールは、菜の花の葉や茎を連想させる配色の提案ですが、印象は用途や面積によって変わります。

春の花市バナーを2通りに配色する

案A：黄色を差し色にする。「春の花市」の告知なら、全体をオフホワイト■#FFF9EB、イベント名を深緑■#315B44、日時・会場の文字をチャコール■#263B2Dにします。背景と見出しのコントラスト比は約7.38:1、本文は約11.46:1です。コントラスト比とは、文字と背景の明るさの差を表す数値です。

下部に深緑■#315B44の帯を作り、そこへ菜の花色■#FFEC47の「参加する」ボタンを配置します。ボタン上の文字をチャコール■#263B2Dにすると約9.93:1、ボタンと帯の差は約6.40:1です。黄色の面積を絞ることで、申込み先を見つける手がかりになります。帯の補足文字は白■#FFFFFFにすれば、深緑との比は約7.75:1です。

案B：黄色を背景の主役にする。菜の花色■#FFEC47をバナー全体に広げ、イベント名と日時を濃紺■#23344Bで表示します。この文字と背景の比は約10.42:1。申込みボタンも濃紺■#23344Bにして白■#FFFFFFの文字を載せると約12.62:1となり、背景からボタンの形を分けられます。濃紺の面積を小さめにし、文字周囲の余白を確保すると、黄色の明るさを残したまま内容を整理できます。

白文字と淡い背景の組み合わせに注意する

菜の花色■#FFEC47と白■#FFFFFFの比は約1.21:1で、黄色の上に白い文字を載せるのは避けたい組み合わせです。オフホワイト■#FFF9EBとの差も約1.15:1しかなく、淡い背景上の黄色いボタンは輪郭が分かりにくくなります。暗い帯の上に置くか、十分な濃さの枠を加えます。

Webのアクセシビリティ指針であるWCAG 2.2では、レベルAAの通常サイズの文字に4.5:1以上、大きな文字に3:1以上を求めています。見分けることが必要な操作部品の輪郭など、文字以外の要素にも隣接色と3:1以上の基準が適用される場合があります。色だけに頼らず「日時」「申し込む」などの言葉や配置でも意味を伝えましょう。

HueRollではHEXコードを入力して色を確認し、選択色と白・黒のコントラスト比を見られます。任意の2色間の比較やAAの自動判定には対応していないため、今回のような配色は組み合わせごとに別途確認してください。