アクアブルーに合う色は？透明感のある配色例

CSSには `aqua` という名前付き色があり ■#00FFFF を表しますが、「aqua blue（アクアブルー）」という名前付き色は定義されていません。そこでこの記事では、透明感のある配色を考えるための具体例として、青緑寄りの明るいアクアブルー ■#35B6C8 を基準色にします。広い面には明るい無彩色や淡い寒色を使い、文字や主要操作には深い色を置くことで、軽さを残しながら情報を見分けやすくします。

アクアブルーには、明るい面と深い文字色を合わせる

CSSで使われるHSL（Hue・Saturation・Lightness、色相・彩度・明度で色を表す方法）では、色相は色の種類、彩度は鮮やかさ、明度は明るさを表します。透明感のある印象を作りたい場合も、明るい色だけで全体をそろえるのではなく、背景・補助面・文字・操作の役割ごとに明度差を作ることが重要です。

HueRollの補色・類似色ガイドでは、類似色は背景やセクションなどの連続性を作りやすく、補色のように離れた色相はアクセント向きとされています。アクアブルーでは、淡いミントや白に近い色を広い面に使い、暖色を加える場合は小さな面積に絞ると、寒色中心のまとまりを保ちやすくなります。

透明感を作りやすい3つの組み合わせ例

本文にはダークスレート ■#24363A を使うと、フロストホワイト ■#F7FBFB 上で約12.11:1、ペールミント ■#DFF4F1 上で約11.03:1、ソフトサンド ■#F2E6D2 上で約10.23:1です。いずれもWCAG 2.2（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）が通常サイズの文字に求める4.5:1以上を満たします。

一方、アクアブルー ■#35B6C8 をそのまま文字色にすると、フロストホワイト ■#F7FBFB との比率は約2.32:1しかありません。白文字 ■#FFFFFF をアクアブルー ■#35B6C8 の上に置く場合も約2.42:1で、通常サイズの文字には不足します。アクアブルーを塗り面として使うなら、ダークスレート ■#24363A を文字にすると約5.21:1です。

主要なリンクやCTA（行動を促すボタン）には、同系の深いティール ■#1E5D66 を使う方法があります。フロストホワイト ■#F7FBFB との比率は約7.16:1、ペールミント ■#DFF4F1 とは約6.52:1、ソフトサンド ■#F2E6D2 とは約6.05:1です。白文字 ■#FFFFFF を深いティール ■#1E5D66 のボタン上に置く場合も約7.47:1です。

透明感は「淡い色の数」ではなく、役割と面積で整える

透明感を出そうとして淡い水色やミントを増やしすぎると、カード、リンク、選択状態の違いまで弱くなることがあります。60–30–10の考え方を使う場合も、数値を厳密に合わせるのではなく、明るい背景を広く、補助色を中程度、アクアブルーや深い操作色を小さく使う目安として考えると整理しやすくなります。

また、選択中・未選択や成功・注意などを、水色と青緑の違いだけで伝えないようにします。WCAGでは、色を情報伝達の唯一の視覚的手段にしないことが求められています。文字ラベル、アイコン、下線、枠線なども併用してください。

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