シアンに合う色は？鮮やかな水色を活かす配色

シアンは、青と緑の間にある鮮やかな色です。CSSでは名前付き色の cyan が ■#00FFFF と定義され、aqua と同じ色を表します。この記事では、この純粋なシアン ■#00FFFF を具体例に、鮮やかさを残しながら、文字や操作が見づらくならない配色を考えます。

シアンは「明るい面」と「深い色」で役割を分ける

CSSで使われるHSL（Hue・Saturation・Lightness、色相・彩度・明度で色を表す方法）では、シアン ■#00FFFF は色相180度・彩度100%・明度50%で、青と緑の間に位置する非常に鮮やかな色です。画面全体に広く使うと強く見えやすいため、背景やカード面はオフホワイトや淡いグレーにし、本文と操作には深い色を置くと整理しやすくなります。

HueRollの補色・類似色ガイドでは、近い色相は連続性を作りやすく、離れた色相はアクセント向きとされています。シアンを主役にする場合も、淡い青緑やグレーを広い面に使い、暖色を加えるなら小さな面積に絞ると、鮮やかさが競い合いにくくなります。

鮮やかなシアンを活かす3つの合わせ方

本文色にはダークスレート ■#183237 を使うと、クールホワイト ■#F6FAFA 上で約12.88:1、ペールブルーグレー ■#D9E5E7 上で約10.52:1、ソフトサンド ■#F2E3D5 上で約10.79:1です。いずれもWCAG 2.2（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）が通常サイズの文字に求める4.5:1以上を満たします。

一方、シアン ■#00FFFF をクールホワイト ■#F6FAFA 上の通常文字にすると、比率は約1.19:1しかありません。白文字 ■#FFFFFF をシアン ■#00FFFF の上に置く場合も約1.25:1で不足します。シアンの塗り面に文字を置くなら、ダークスレート ■#183237 なら約10.80:1です。

主要なリンクやCTA（行動を促すボタン）には、深いティール ■#005B66 を使う方法があります。クールホワイト ■#F6FAFA との比率は約7.43:1、ペールブルーグレー ■#D9E5E7 とは約6.07:1、ソフトサンド ■#F2E3D5 とは約6.22:1です。白文字 ■#FFFFFF を深いティール ■#005B66 の上に置く場合も約7.81:1です。

シアンは「目立つ色」と「操作色」を分けて使う

シアン ■#00FFFF は明るい背景とのコントラストが低いため、明るいページ上では装飾、グラフの1系列、アイコンの内部色など、意味の判別に必須ではない部分へ使う方が安全です。ボタンなど操作に必要な境界へ使う場合は、深いティール ■#005B66 の枠線や別の形の手掛かりを加えます。

60–30–10の考え方を使う場合も、数値を厳密に測るのではなく、明るい背景を広く、補助色を中程度、シアンのような鮮やかな色を小さく使う目安として扱います。また、選択中・未選択や状態の違いを色だけで伝えず、文字ラベル、アイコン、下線、枠線なども併用してください。

HueRollでは、基準色からティント、シェード、補色、類似色、各種配色、60–30–10の候補を確認できます。シアンを選んだら、まずティントや類似色から背景候補を探し、シェードから操作色候補を比較すると役割を分けやすくなります。HueRollのコントラスト確認は選択色と白・黒の比較に限られるため、この記事で示した任意の2色同士の比率は別途計算した値です。