柳色を背景に使う配色｜文字とボタンは何色にする？

柳色（やなぎいろ）をWebページの背景に使うなら、文字は濃いチャコール、目立たせたいボタンは深緑に白文字を合わせる方法が考えられます。柳色は明るい黄緑なので、白文字や淡いボタンだけでは背景に埋もれることがあります。園芸ワークショップの申込欄と植物図鑑の見出し部分を例に、文字色とボタン色を具体的に比較します。

柳色の背景には濃い文字を基本にする

柳色は柳の葉を思わせる、やわらかな黄緑系の色名です。和色大辞典は柳色を■#A8C97F、I-IROは■#9EAC77として紹介しています。ここでのHEX（ヘックス）は、Webで色を指定する「#」と6桁の英数字からなるカラーコードです。色名だけで数値が一つに定まるわけではないため、以下は和色大辞典の■#A8C97Fを背景の基準にします。

柳色■#A8C97Fの背景に白■#FFFFFFを載せたときのコントラスト比は約1.85：1です。一方、濃いチャコール■#243029なら約7.40：1になります。コントラスト比とは、文字色と背景色の相対的な明るさの差を示す数値です。見出しも説明文も、まずは濃い文字で統一すると色の役割を整理しやすくなります。

申込みボタンと一覧ボタンを作る2つの配色例

例A：園芸ワークショップの申込欄。案内欄の背景を柳色■#A8C97Fとし、「苗の植え替え講座」の見出し、開催日時、参加条件をチャコール■#243029で示します。主ボタン「参加を申し込む」は深緑■#204C3Dの背景に白■#FFFFFFの文字を配置します。柳色と深緑の面同士は約5.24：1、深緑と白文字は約9.71：1なので、ボタンの位置と文字の両方に明るさの差を作れます。

例B：植物図鑑のカテゴリーヘッダー。柳色■#A8C97Fの見出し帯に植物名と短い説明をチャコール■#243029で置き、補助ボタン「植物一覧を見る」はオフホワイト■#FCF9F3の背景、チャコール■#243029の文字と枠線で作ります。オフホワイトと柳色の面同士は約1.76：1しかなく、塗りだけではボタンの境界が弱めです。そこで、チャコールの枠線を付けます。枠線と柳色は約7.40：1、ボタン文字とオフホワイトは約13.06：1です。主ボタンほど強く目立たせずに、操作できる場所を示す方法です。

白文字・薄い補足文字・操作状態に注意する

柳色■#A8C97Fの上に、少しくすんだ緑■#526D49を補足文字として置くと約3.11：1です。通常サイズの文字には十分ではないため、説明や注意書きにもチャコール■#243029などの濃い色を使います。WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAでは、通常サイズの文字に原則4.5：1以上、大きな文字に3：1以上が必要です。また、操作部品の存在や状態を識別するために必要な線や形には、隣接色との3：1以上が基準になります。

スマートフォンではボタンが長くなりすぎないかを確かめ、キーボード操作時のフォーカス位置も色だけに頼らず枠線などで示します。ボタンを複数並べる場合は、主ボタンと補助ボタンで役割を分け、すべてを深緑にしないことも大切です。

HueRollではHEXで色を調整し、選択色と白・黒のコントラストを確認できます。ただし、任意の2色の比較やWCAGの自動合否判定には対応していません。完成した画面では、実際に隣接する文字・ボタン・背景の組み合わせを別途確認してください。