あんず色と白の配色｜やさしさを残してメリハリをつけるには？

あんず色と白を合わせると、明るくやわらかなWeb配色を作れます。ただし、どちらも明るい色なので、文字やカードの境界まで淡くすると情報の違いが伝わりにくくなります。やさしい雰囲気を保つには、白とあんず色の面積を決め、文字・ボタン・必要な枠線だけを濃くするのがポイントです。焼き菓子のメニューカードと料理教室の案内で比べます。

白とあんず色の役割を分け、文字は濃い色にする

今回のあんず色には、和色大辞典が杏色として紹介する■#F7B977を使います。熟した杏の実を思わせる黄みのある橙色です。HEX（ヘックス）はWebで色を指定する「#」と6桁の英数字からなるカラーコードで、色名だけで唯一の値が決まるわけではありません。組み合わせる白は■#FFFFFFです。

あんず色■#F7B977と白■#FFFFFFのコントラスト比は約1.73：1です。コントラスト比は2色の相対的な明るさの差を示す数値です。背景として並べるだけなら穏やかな組み合わせですが、この2色だけで操作に必要な輪郭を表すのは避けます。文字には濃いチャコール■#342B27を選ぶと、白との比は約13.81：1、あんず色との比は約8.00：1になります。

メニューカードと料理教室の案内で面積を変える

例A：焼き菓子のメニューカード。ページ全体と商品カードを白■#FFFFFFにし、見出しの短い帯や「季節限定」のラベルだけをあんず色■#F7B977にします。商品名・価格・説明はチャコール■#342B27で表示し、「予約する」ボタンは濃い茶色■#74412Fの背景に白■#FFFFFFの文字を使います。ボタン文字と背景のコントラスト比は約8.27：1です。あんず色を小面積に抑えると、写真や商品情報のための白い余白を残せます。

例B：親子料理教室の告知セクション。こちらは背景の広い部分をあんず色■#F7B977にして、短い見出しをチャコール■#342B27で載せます。日時・参加費・持ち物は白■#FFFFFFの案内カードにまとめ、文字をチャコール■#342B27にします。申込みボタンはあんず色の面に濃い茶色■#74412Fを置き、文字は白■#FFFFFFです。ボタン面と周囲のあんず色には約4.79：1の明るさの差があります。大きな色面を使う場合も、長文は白いカードに分けると情報を追いやすくなります。

どちらも写真の占める範囲や文字量によって配分を変える提案です。白とあんず色を半分ずつにする必要はなく、最初に見せたい要素に合わせて広い面を選びます。

淡い色同士の境界と白文字を最後に確認する

あんず色■#F7B977に白■#FFFFFFの文字を直接載せると約1.73：1で、通常サイズの文字には不十分です。WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAでは、通常の文字に原則4.5：1以上、大きな文字に3：1以上が必要です。あんず色の見出し帯にはチャコール■#342B27を使い、白文字は濃い茶色のボタンに限定します。

例Bの白い案内カードは、あんず色の背景と約1.73：1の差しかありません。カードの輪郭が操作や情報の識別に必要なら、暗めの茶色■#86533Aで枠を付ける方法があります。この枠線はあんず色■#F7B977に対して約3.67：1、白■#FFFFFFに対して約6.34：1です。操作部品を識別するのに必要な視覚情報には、隣り合う色と原則3：1以上の差が求められます。装飾用カードには必ずしも同じ枠線は必要ありません。

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