ターコイズを使ったWEBデザイン｜爽やかに見せる配色のコツ
ターコイズは、青と緑の中間にある色の呼び名です。明るい青緑を使うと、水や空を連想させる軽やかなWEBデザインを考えやすくなります。ただし、ターコイズに決まった1つのHEXコードがあるわけではありません。この記事では明るいターコイズ#24B3BEを例に、爽やかさと文字の読みやすさを両立する配色を組み立てます。HEXは、WEB上の色を16進数で指定するコードです。
ターコイズを広い面に使い、文字と操作には濃い色を合わせる
爽やかさを出したいときは、ターコイズをすべての場所に使うより、主役となる場所を決めるほうが効果的です。例えばページ冒頭の大きな案内エリアに使い、その後の本文や料金案内は落ち着いた背景へ切り替えます。海の写真と組み合わせる場合も、色を重ねる面積を増やしすぎないことがポイントです。
明るいターコイズ#24B3BEの上に白#FFFFFFの文字を置くと、コントラスト比は約2.54:1です。一般的な大きさの文字には差が足りません。一方、濃いネイビー#193845を合わせると約4.88:1になり、通常サイズの文字にも使える組み合わせです。
ターコイズは色相（青や緑などの色みの違い）で涼しさを表現する役割に、濃い色は情報を伝える役割に分けます。色だけで目立たせようとせず、見出しの大きさや余白でも情報の順序を示しましょう。
海の体験予約ページで使う配色例
シュノーケリング体験の紹介と予約を行うWEBページを想定します。写真を引き立てながら、集合時間・料金・予約ボタンを見つけやすくする構成です。
- ページ冒頭の案内エリア：ターコイズ#24B3BEを背景に、濃いネイビー#193845で見出しと説明を書きます。明度（色の明るさ）に差を付け、水辺の印象と文字の読みやすさを分けて設計します。
- 本文エリア：淡いサンドホワイト#F8F5EDを広く使い、文字はネイビー#193845にします。文字と背景のコントラスト比は約11.39:1です。やや温かみのある背景で青緑一色になりすぎないようにします。
- 料金・コースのカード：白#FFFFFFを背景に、ネイビー#193845で内容を表示します。本文の文字と白の比率は約12.40:1です。カードは余白と枠線でも区切ります。
- 集合時間・持ち物の案内：薄いアクア#E9F5F4を背景に、ネイビー#193845で書きます。文字と背景の比率は約11.12:1です。
- 「体験を予約する」ボタン：濃い青緑#08646Dに白#FFFFFFの文字を使います。文字との比率は約6.88:1、サンドホワイト#F8F5EDの周囲に対しては約6.31:1です。
- カードや入力欄の境界線：グレーを含む青緑#67868Aを使うと、白#FFFFFFに対して約3.92:1、薄いアクア#E9F5F4に対して約3.52:1です。
主役のターコイズと予約ボタンの濃い青緑は同じ系統ですが、明るさと役割を変えています。特に予約ボタンを淡い色の面に配置すると、情報の中で次の操作を区別しやすくなります。
爽やかな印象を保つための調整と注意点
WCAG（ウェブコンテンツのアクセシビリティ指針）2.2のレベルAAでは、通常サイズの文字に4.5:1以上、大きな文字に3:1以上のコントラスト比が求められます。また、操作に必要な入力欄の境界や状態を示す図形には、隣接色との3:1以上が基準になります。文字を白に変更したり、ボタンを薄くしたりすると数値も変わるため、必ず実際の組み合わせで確認してください。
写真の上に文字を直接重ねる場合は、場所によって明るさが変わります。文字の後ろに不透明な面を設けるか、画像の上で読める範囲を検証しましょう。スマートフォンでは、予約ボタンの周囲の余白、案内カードの区切り、細い文字の読みやすさも確認します。選択状態や「受付終了」などは色だけでなく言葉でも示します。
HueRollでは色のHEXコードを指定し、ティント（明るい色）、シェード（暗い色）、類似色などの候補を確認できます。コントラスト確認は選択色と白・黒の比較に限られ、任意の2色の比較やAA・AAAの自動判定はできません。今回のような色同士の組み合わせは別途比率を計算し、完成画面で見直してください。