オレンジと紫の配色が派手になるときは？鮮やかさと面積を調整

オレンジと紫を組み合わせたら、思ったより派手になったことはありませんか。2色とも鮮やかなまま大きく使うと、見出し・背景・ボタンが競い合って見える場合があります。色の組み合わせを変える前に、彩度を下げる部分と、色を使う面積を減らす部分を分けて考えましょう。具体的なカラーコードと、書籍フェアのバナー・チケット案内画面の例で比較します。

オレンジと紫が強すぎるときは、彩度と面積を別々に直す

比較用に、鮮やかなオレンジ■#FF7A20と紫■#8734C5を置きます。HSLは色相（色み）・彩度（鮮やかさ）・明度（明るさ）で色を表す形式です。この例のHSL彩度はオレンジが約100％、紫が約58％です。色相が離れた2色を両方大きく使うと、どこを見るべきか迷う構成になることがあります。

色みを大きく変えずに落ち着かせる例として、オレンジを■#D29A72、紫を■#3D2E4Bへ変更します。それぞれのHSL彩度は約52％、約24％です。色の明るさも変わっているため、「彩度だけを下げれば同じ結果になる」という意味ではありません。HEX（Web上の色を16進数で指定するコード）を揃えて、修正前後を実際の画面で見比べることが大切です。

修正前の鮮やかなオレンジと紫のコントラスト比（2色の相対的な明るさの差）は約2.42:1です。この差だけでは通常の文字に十分とはいえません。一方、修正後のオレンジと濃い紫は約5.09:1になります。ただし修正後のオレンジに白■#FFFFFFの文字を載せると約2.44:1しかないため、ボタンやラベルの文字は濃い紫にします。

色の面積を変える2つの配色例

書籍フェアのバナー：明るい余白を増やし、2色を小さく使う

新刊を紹介する横長バナーでは、背景の大部分を温かみのあるオフホワイト■#F9F7F2とし、見出しと「本を見る」ボタンだけに濃い紫■#3D2E4Bを使います。見出しと背景の比は約11.60:1です。開催日を示す小さなラベルを落ち着いたオレンジ■#D29A72にし、文字を濃い紫にすると約5.09:1です。オレンジのラベルは短い文字列を囲む程度の幅に抑えます。

本の特徴をまとめる欄を淡いラベンダー■#EEE7F0にし、本文を暗い青灰■#27313Cにすると約10.89:1です。ラベンダーとオフホワイトの差は約1.13:1と小さいため、明確な区切りが必要な場合は濃い紫の枠や十分な余白を加えます。「本を見る」ボタンの文字は白■#FFFFFFにすれば紫との比は約12.42:1となり、ボタンと明るい背景も約11.60:1で区別できます。

チケット受付ページ：紫を主背景にし、オレンジはボタンへ集中

公演のチケット案内では、冒頭の背景を濃い紫■#3D2E4B、タイトルと説明を白■#FFFFFFにします。文字と背景の比は約12.42:1です。購入ボタンだけに落ち着いたオレンジ■#D29A72を使い、文字を濃い紫にすると、文字とボタンの比も、ボタンと紫の背景の比も約5.09:1になります。オレンジの飾り線を増やすより、購入操作に色を集める配置です。

料金と会場はオフホワイト■#F9F7F2の案内面にまとめ、濃い青灰■#27313Cで書きます。文字と案内面の比は約12.33:1、案内面と紫の周囲は約11.60:1です。内容を補足する淡いラベンダー■#EEE7F0のカードも使えますが、案内面との差は約1.13:1なので、境界を伝える必要がある場合は枠と余白で補います。

落ち着かせても、文字とボタンのコントラストは確認する

最初に色数を増やさず、①広い面の色を明るい中立色か濃い紫のどちらかに決め、②もう一方の色をラベルや主要ボタンに絞り、③文字色を背景ごとに検証します。オレンジの色みだけで重要事項を表さず、日付・「購入する」などの文言も添えてください。彩度を下げた色が必ず適切とは限らず、端末や周囲の写真でも見え方が変わります。

WCAG 2.2（Webコンテンツのアクセシビリティに関するガイドライン）のレベルAAでは、通常サイズの文字と背景に4.5:1以上、大きな文字に3:1以上のコントラスト比が必要です。操作部品の識別に必要な見た目の情報には、隣接色との3:1以上が求められる場合があります。HueRollではHEX入力で関連色や配色候補、選択色と白・黒との比を確認できます。ただし任意の2色同士の比較やAA・AAAの自動判定には対応していないため、完成した配色は別途検証しましょう。