柳色と生成り色の配色例｜境界をぼかさない色使い

柳色と生成り色は、柔らかな黄緑と少し黄みのある白を組み合わせる配色です。草木染めや手仕事を紹介するWebページにも取り入れやすい一方、どちらも明るい色なので、カードや入力欄の境界が背景に溶け込むことがあります。大切なのは、すべての面を濃くするのではなく、区切りが必要な場所だけに濃い線や文字を使うことです。

柳色と生成り色は相性がよくても、面の境界は弱い

和色大辞典にある柳色（やなぎいろ）の参考例は■#A8C97F、生成り色（きなりいろ）の参考例は■#FBFAF5です。柳色は柳の葉を思わせる黄緑、生成り色は染めていない布のような淡い色を指します。色名に唯一の数値があるわけではないので、ここではこの2色を基準にします。HEX（ヘックス）は、Webの色を「#」と6桁の英数字で指定する形式です。

柳色■#A8C97Fと生成り色■#FBFAF5を並べたコントラスト比は約1.77:1です。コントラスト比は2色の相対的な明るさの差を表す数値で、この程度の差では、カードの端を色だけで明確に示すのは難しい場合があります。柳色を生成り色の上の本文文字にしても、通常の文字には不足します。

文字には濃い緑灰■#2F3C2Dを使うと、柳色■#A8C97Fの上で約6.27:1、生成り色■#FBFAF5の上で約11.13:1になります。2つの淡色を背景として残しながら、見出しや案内文の読みやすさを確保できる組み合わせです。

草木染め体験会のカードと申込欄を2色で分ける

たとえば、草木染め体験会の募集ページで、体験の写真、開催日、持ち物、参加申込欄を紹介する場合を考えます。写真の色を変えるのではなく、周囲の背景と案内カードを色分けします。

• 生成り色を広く使う案：ページ背景を生成り色■#FBFAF5にし、開催日と持ち物を柳色■#A8C97Fのカードにまとめます。カードに明確な輪郭が必要なら、濃いオリーブ■#586B44の枠線を足します。この線は柳色との比が約3.14:1、生成り色との比が約5.58:1です。見出しと本文は濃い緑灰■#2F3C2Dにし、写真には文字を重ねません。
• 柳色を広く使う案：冒頭の短い案内エリアを柳色■#A8C97Fにし、その中に生成り色■#FBFAF5の申込カードを置きます。カード内の氏名・メールアドレス欄は白■#FFFFFFにし、入力欄の輪郭には濃いオリーブ■#586B44を使います。白い入力面と生成り色の比は約1.05:1と小さく、枠線がなければ境界が分かりにくくなります。枠線は白と約5.83:1、生成り色と約5.58:1の差があります。

前者は日程や持ち物をひとまとまりに見せたい場合、後者は申込フォームを一つの独立した領域として示したい場合の例です。カードの見出しを本文より大きくし、各項目に余白を設ければ、色の違いだけに頼らず整理できます。

輪郭が必要な入力欄と、余白で足りるカードを区別する

生成り色■#FBFAF5の上に白■#FFFFFFの写真カードを置くと、背景同士の比は約1.05:1です。単に写真をまとめるための装飾カードなら、余白や見出しだけで区切れることもあります。一方、入力欄の位置が分からない場合は、濃いオリーブ■#586B44の線を使い、枠の太さや位置まで確認しましょう。

入力中の欄を区別したいときは、フォーカス（キーボード操作などで現在選択している状態）の輪郭を濃い緑灰■#2F3C2Dにする方法があります。柳色との比は約6.27:1、生成り色との比は約11.13:1です。輪郭の変化に加え、項目名や案内文を付け、色の変化だけで状態を知らせないようにします。

白■#FFFFFFの文字を柳色■#A8C97Fの見出し面に置いた場合は約1.85:1で、通常の文字にも大きな文字にも不足します。WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAでは、通常文字には原則4.5:1以上、大きな文字には3:1以上が求められます。入力欄など、操作部品を識別するために必要な視覚的手がかりには、隣接色と原則3:1以上が必要です。ただし、すべての装飾カードに3:1の輪郭線が必要という意味ではありません。

HueRollではHEXコードで色を調整し、配色候補や、選択した色と白・黒とのコントラストを確認できます。ただし、任意の2色を直接比較する機能やWCAGの自動判定はありません。今回の柳色・生成り色・文字・境界線の組み合わせは、別途2色ずつ計算しています。