若草色に合う色は？春のWebデザインに使える配色例

春のイベント告知や季節限定商品のWebページで若草色を使うなら、何色を組み合わせるとまとまるのでしょうか。明るい黄緑を増やすだけでは、文字やボタンが背景に埋もれることがあります。ここでは生成り、深緑、落ち着いた赤紫を合わせ、春の苗市の告知ページと商品紹介ページで使い方を比較します。

若草色には生成り・深緑・落ち着いた赤紫を合わせる

若草色は、芽吹いたばかりの草を思わせる黄みのある緑です。色名に対応するコードは見本によって異なる場合がありますが、この記事では鮮やかな黄緑の ■#C3D825 を基準にします。HEX（ヘックス）とは、「#」と数字・英字を組み合わせてWeb上の色を表すカラーコードの形式です。

• 若草色 ■#C3D825：春らしさを伝える見出しの背景や短いラベル
• 生成りに近い色 ■#FAF8F0：ページ全体の背景と写真の周囲の余白
• 深緑 ■#26372B：見出し、本文、若草色の上に置く文字
• 落ち着いた赤紫 ■#744454：申し込みなどの主要ボタン
• 白 ■#FFFFFF：赤紫のボタン内の文字

若草色の黄みと生成りの柔らかい色みを近づけ、深緑の暗さで文章を引き締める組み合わせです。赤紫は黄緑とは色相（赤・緑・紫などの色の種類）が離れているため、小さく置けば操作する場所を区別する助けになります。どの色も春の印象を必ず生むわけではなく、写真や扱う商品との相性を見て決めます。

春のWebページで使う2つの配色例

苗市の告知ページ：若草色を見出しの背景にする

画面の上部に若草色 ■#C3D825 の横長の帯を置き、深緑 ■#26372B で「春の苗市」と開催日を書きます。下は生成り ■#FAF8F0 の背景にして、苗や鉢植えの写真と会場・時間の案内を並べます。申し込みボタンは落ち着いた赤紫 ■#744454 を背景に、白 ■#FFFFFF で「参加を申し込む」と表示します。若草色を広く使っても、イベント情報は濃い文字、操作は別の色と役割を分けられます。

春の新商品ページ：若草色を小さなアクセントにする

写真に緑の葉が多い商品紹介ページでは、背景を生成り ■#FAF8F0、商品名と価格を深緑 ■#26372B にして写真を主役にします。「春の新作」と書いた短いラベルだけを若草色 ■#C3D825 の背景と深緑 ■#26372B の文字にすると、写真の緑と色が競いにくくなります。購入ボタンは赤紫 ■#744454 に白 ■#FFFFFF の文字を合わせ、ラベルと購入操作を別々に識別できるようにします。

明るい若草色では文字と境界を別に確認する

文字と背景の明るさの差を示すコントラスト比を計算すると、深緑 ■#26372B と若草色 ■#C3D825 は約7.92:1、深緑 ■#26372B と生成り ■#FAF8F0 は約11.87:1、白 ■#FFFFFF と赤紫 ■#744454 は約7.79:1です。いずれもWCAG 2.2で通常サイズの文字に求められる4.5:1以上です。一方、白 ■#FFFFFF と若草色 ■#C3D825 は約1.59:1なので、若草色の上に白文字を載せる方法は避けます。

若草色 ■#C3D825 と生成り ■#FAF8F0 の差も約1.50:1しかありません。若草色の細い線だけで入力欄やボタンの境界を示すと、隣の明るい背景に埋もれるおそれがあります。重要な操作部品には深緑 ■#26372B の枠や文字、分かりやすい形を加え、スマートフォンでも押す場所を確認してください。WCAG 2.2では、意味を持つ操作部品の視覚的な境界などに原則3:1以上の差を求めています。

HueRollでは若草色のHEXコードを入力し、関連色の候補と、選択した色に対する白・黒のコントラストを確認できます。今回のような任意の2色の組み合わせは別途計算し、完成したページの文字・写真・ボタンを実際の表示で確かめましょう。