ピスタチオグリーンとクリーム色の配色｜淡い画面のメリハリを作る

ピスタチオグリーンとクリーム色は、どちらも明るく、穏やかな配色を考えるときの組み合わせです。ただし、商品カードや入力欄まで淡い2色だけで分けると、どこからどこまでが一つの情報なのか分かりにくくなることがあります。色を鮮やかにし直すのではなく、文字・主ボタン・必要な境界を濃い色にして、やわらかさとメリハリを両立する方法を紹介します。

淡い2色は背景に、濃い緑は文字と操作に使う

ピスタチオグリーンは、ナッツのピスタチオの実を思わせる黄みのある緑です。I-IROの色彩図鑑に掲載されている■#A4BD90（RGBは赤164・緑189・青144）を基準にします。クリーム色■#FFF4E2と、濃いチャコール■#29372D、深い緑■#205746は今回のWeb配色用に選んだ提案色です。色名に対して唯一の数値が決まっているわけではありません。RGBは画面の色を赤・緑・青の光の成分で示す方式、HEX（ヘックス）は「#」と6桁の英数字による色指定です。

ピスタチオグリーン■#A4BD90とクリーム色■#FFF4E2のコントラスト比は約1.88：1です。コントラスト比は、隣り合う色の相対的な明るさの差を数値にしたものです。この2色を背景に並べるだけでは、操作に必要な輪郭としては差が小さめです。一方、チャコール■#29372Dを使うと文字とピスタチオグリーンは約6.11：1、文字とクリーム色は約11.49：1になり、淡い面を保ちながら情報を読み分けられます。

焼き菓子の商品一覧と家庭菜園講座の申込みフォームで比べる

例A：焼き菓子のオンライン商品一覧。ページ全体をクリーム色■#FFF4E2にし、ピスタチオを使った焼き菓子の商品カードをピスタチオグリーン■#A4BD90にします。商品名・価格・原材料の説明はチャコール■#29372Dで表示し、「商品を見る」ボタンを深い緑■#205746の背景に白■#FFFFFFの文字で置きます。白文字とボタンの比は約8.36：1、ボタンとカード背景の比は約4.08：1です。商品カード同士は余白で分け、実際の写真の背景とカード色が近い場合は写真の輪郭も確認します。

例B：家庭菜園講座の申込みフォーム。こちらは広い背景をピスタチオグリーン■#A4BD90にし、「講座内容」「日程」「持ち物」といった説明をチャコール■#29372Dで載せます。名前やメールアドレスの入力欄はクリーム色■#FFF4E2にして、文字をチャコール■#29372Dで表示します。淡い入力欄の境界には暗めのオリーブグレー■#516448の枠線を使い、外側の緑と約3.14：1、内側のクリーム色と約5.91：1の差を確保します。「申し込む」ボタンは深い緑■#205746に白■#FFFFFFの文字です。背景の面積を入れ替えても、操作部分の色と文字色は一貫させます。

例Aはクリーム色を広く使い、商品写真を優先します。例Bはピスタチオグリーンを広く使い、入力欄にまとまりを持たせます。2色を半分ずつにする必要はありません。表示する情報量と写真の明るさに応じて面積・余白・カードの配置を調整しましょう。

白文字と、操作に必要な枠線のコントラストを確認する

ピスタチオグリーン■#A4BD90に白■#FFFFFFの通常サイズの文字を載せると約2.05：1、クリーム色■#FFF4E2に白■#FFFFFFでは約1.09：1です。WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAでは、通常サイズの文字は原則4.5：1以上、大きな文字は3：1以上が求められるため、淡い背景には濃い文字を使います。深い緑■#205746の上の白文字なら約8.36：1です。

また、ピスタチオグリーン■#A4BD90とクリーム色■#FFF4E2の境界は約1.88：1しかありません。飾りのカードなら余白で分けられますが、入力欄の存在や選択状態を伝えるために境界が必要なら、オリーブグレー■#516448などの線と文字による手掛かりを使います。操作部品の識別に必要な視覚情報は、隣接色と原則3：1以上のコントラストが基準です。細い線やキーボード操作時のフォーカス表示も実際の画面で確認してください。

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