ターコイズとコーラルの配色｜鮮やかな2色をまとめるコツ

ターコイズとコーラルは、青緑と赤みのあるオレンジを組み合わせる配色です。どちらも鮮やかなので、同じ面積で並べると視線が分散することがあります。2色を生かすには、どちらを主役にするかを決め、背景・文字・ボタンの役割を分けることが大切です。Webサイトの案内ページと告知バナーを例に考えます。

鮮やかな2色は、面積と役割に差をつける

この記事では、青緑系のターコイズ■#18B8AFと、赤橙系のコーラル■#FF786Bを具体例として使います。色名に唯一の数値が決まっているわけではありません。HEX（ヘックス）は、Web上の色を6桁の16進数で指定するコードで、同じ配色を繰り返し使うときに役立ちます。

この2色は色みが違っても明るさが近く、互いのコントラスト比（隣り合う色の明るさの差）は約1.04:1です。片方の上にもう片方で文字を置いたり、2色の境界だけで重要な情報を分けたりする使い方は避けましょう。広い面は明るい中立色にし、主役の色を見出し帯や大きな面へ、もう一方を短いラベルなどに絞ると整理しやすくなります。

白■#FFFFFFの文字をターコイズ■#18B8AFやコーラル■#FF786Bに載せると、それぞれの比は約2.47:1と約2.58:1です。通常の文章には不足するため、ここでは濃い青灰■#20333Bを文字色にします。濃い青灰とターコイズの比は約5.33:1、コーラルとの比は約5.10:1です。

主役を入れ替える2つの配色例

講座の申込みページ：ターコイズを広めに使う

オンライン講座の案内ページなら、ページ全体をクリーム色■#FAF8F2、本文と通常の見出しを濃い青灰■#20333Bにします。講座の特長をまとめた横長の帯をターコイズ■#18B8AFにし、その中の文字も濃い青灰にすると約5.33:1です。本文とクリーム色の比は約12.37:1なので、色の強い帯以外の説明も落ち着いて配置できます。

コーラル■#FF786Bは「早期申込」など短いラベルの背景だけに使い、文字を濃い青灰■#20333Bにします。ラベルとクリーム色の差は約2.43:1なので、ラベルの輪郭が必要な場合は濃い青灰の枠を加えます。申込みボタンは深い青緑■#075F5Dに白■#FFFFFFの文字を組み合わせると約7.49:1です。ボタンをクリーム色の領域に置けば、周囲との比も約7.05:1になります。

イベント告知バナー：コーラルを主役にする

一方、イベントの告知バナーでは、コーラル■#FF786Bを大きな背景にして、タイトルを濃い青灰■#20333Bにします。タイトルと背景の比は約5.10:1です。日時や会場を示すターコイズ■#18B8AFの小さな帯は、クリーム色■#FAF8F2の情報欄に配置し、濃い青灰の文字を載せます。ターコイズの文字との比は約5.33:1です。

コーラルとターコイズを直接重ねず、クリーム色の領域や余白で離すのがポイントです。申込みボタンは濃い青灰■#20333Bを背景に、白■#FFFFFFを文字にすると約13.14:1。コーラルの背景に置いたときも、ボタンと周囲の比は約5.10:1です。2色を使いながらも、申し込み先を一つの濃色で示せます。

色の強さを調整するときの注意点

見た目がにぎやかすぎる場合は、ターコイズとコーラルの鮮やかさを同時に下げるより、まず小さい方の色の面積を減らしてみましょう。2色を並べる必要があるときは、余白や濃い枠、ラベルを使い、色の違いだけで情報の区切りや状態を伝えないようにします。スマートフォンでは色の面積比が変わりやすいので、折り返し後の配置も確認します。

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