補色をWEBデザインで使う方法｜目立たせながら派手にしすぎないコツ
補色は色相環で反対側に位置する色同士です。WEBサイトで重要な場所を目立たせたいときの候補になりますが、2色を同じ面積でぶつけると、画面が派手に感じられたり、文字やボタンの位置がかえって分かりにくくなったりします。大切なのは補色を大きく使うことではなく、主役の色と操作に使う色の役割を分け、背景との明暗差を確認することです。
補色は色相を180度離し、明るさと面積を調整する
色相環は紫・黄緑・赤などの色みを円に並べたものです。HSL（色相・彩度・明度で色を表す方式）では、色相を180度動かすと反対側の補色を求められます。例えば色相275度の紫#5B2A7Eと、95度の黄緑#4D7E2Aです。どちらもHSLの彩度50％、明度33％を基準に作り、HEX（WEBの色を16進数で指定するコード）へ変換するときに端数を丸めた例です。
ただし、この紫#5B2A7Eと黄緑#4D7E2Aを直接隣り合わせにしたときのコントラスト比は約2.09:1です。コントラスト比は隣接する色の相対的な明るさの差を表します。色相が正反対でも、操作部品の輪郭や小さな文字に必要な明暗差が自動的に生まれるわけではありません。
そこで紫をページ上部の主役にし、黄緑側の色は必要に応じて明るくしたり暗くしたりして使います。さらに本文やカードの背景を白に近い色へ分けると、強い色が画面全体で競い合うのを抑えられます。
音楽配信イベントの申込みページで使う配色例
配信ライブの出演者、開催日時、視聴チケット、先行申込みを紹介するページを想定します。紫と黄緑の補色関係を残しながら、背景ごとに役割を変えます。
- 冒頭のイベント案内：濃い紫#5B2A7Eを背景に、白#FFFFFFでイベント名と開催日を表示します。文字と背景のコントラスト比は約10.11:1です。
- 紫の上に置く「出演者を見る」ボタン：明るく調整した黄緑#C2E2ACを背景に、チャコール#302C35の文字を合わせます。文字とボタンは約9.61:1、ボタンと周囲の紫#5B2A7Eは約7.11:1です。
- 出演者紹介・チケット料金：オフホワイト#FAF9F5の背景にチャコール#302C35で説明や金額を書きます。文字と背景は約12.97:1です。写真や文章を読む場所には濃い補色を広げません。
- 出演者・券種カード：白#FFFFFFのカードにチャコール#302C35の文字を使うと約13.66:1です。ただし、白#FFFFFFとオフホワイト#FAF9F5の背景同士は約1.05:1なので、グレー#7A7A82の枠線を付けます。枠線と白#FFFFFFの差は約4.26:1です。
- 視聴方法と注意事項：淡いラベンダーグレー#F1F0F4にチャコール#302C35を載せます。文字は約12.04:1で、グレー#7A7A82の枠線もこの背景と約3.75:1の差があります。
- 「先行受付」の小さなラベル：補色側の黄緑#4D7E2Aの背景に白#FFFFFFで表示します。文字との比率は約4.85:1です。対象期間も文章で明記し、ラベルの色だけで意味を伝えません。
- 「視聴チケットを申し込む」ボタン：明るい本文エリアでは少し暗く調整した黄緑#3F6921に白#FFFFFFの文字を使います。文字とボタンは約6.45:1、ボタンと周囲のオフホワイト#FAF9F5は約6.13:1です。
- 詳細へのテキストリンク：濃い紫#5B2A7Eをオフホワイト#FAF9F5の上で使うと約9.60:1です。下線も付け、通常の文章と区別します。
黄緑は紫の案内面では明るいボタン、明るい本文では濃い申込みボタンとして使い分けます。補色の角度はそのままに、実際に置く背景に合わせて彩度や明度を調整する考え方です。
補色が派手に見えるときの調整と確認事項
まず、紫と黄緑の広い背景を交互に繰り返していないか確認します。補色の両方を全面に広げるより、案内を紫、本文を明るい無彩色、黄緑をボタンやラベルに限ると、何を見せたいのか整理しやすくなります。淡いラベンダーグレー#F1F0F4とオフホワイト#FAF9F5の差も約1.08:1と小さいため、セクションの区切りは余白や見出しで示しましょう。
WCAG 2.2（WEBコンテンツのアクセシビリティ指針）のレベルAAでは、通常サイズの文字は背景と4.5:1以上、大きな文字は3:1以上が基準です。入力欄の輪郭など、操作や状態を識別するために必要な非テキスト情報も隣接色と3:1以上のコントラストが求められます。ボタンを別の場所へ移す際は、文字と背景だけでなくボタンと周囲の色も確かめ、受付状況は色だけでなく文言で伝えます。
スマートフォンでは出演者名の小さな文字、チケットカードの境界、申込みボタンの位置を確認します。HueRollでは選択した色の補色候補や白・黒とのコントラストを確認できますが、任意の2色の比較やAA・AAAの自動判定には対応していません。ここに示した任意の色同士の比率は別途計算しています。