浅葱色と水色の違いは？青みと緑みを比べてみよう
浅葱色（あさぎいろ）と水色（みずいろ）は、どちらも青系に見える色ですが、同じ色ではありません。浅葱色ははっきりした青緑、水色は白を多く含んだように見える淡い青として使われます。ただし、色名に対応する色見本は資料によって異なります。この記事では浅葱色#00A3AFと水色#BCE2E8を例に、青み・緑みだけでなく明るさや鮮やかさも比べ、Webデザインでの使い分けを考えます。
浅葱色は鮮やかな青緑、水色は明るい淡色
色の「色相」は青や緑など色みの方向、「彩度」は鮮やかさ、「明度」は明るさのことです。今回の2色は色相がかなり近く、単純に「浅葱色は緑、水色は青」と分けるより、明るさと鮮やかさの差を見る方が正確です。
- 浅葱色#00A3AF：RGBでは赤0・緑163・青175です。RGBは赤・緑・青の光の成分を0～255の数値で示す形式です。緑と青の成分が多く、赤が含まれないため、鮮やかな青緑として見えます。
- 水色#BCE2E8：RGBでは赤188・緑226・青232です。青と緑が多い点は共通ですが、赤の成分も高いため全体が白に近づき、淡く見えます。
どちらも青の数値が緑を少し上回っています。したがって、この色見本での違いは「青の多さ」だけでは説明できません。水色にも緑みがあり、浅葱色と水色の差は、とくに明るさと彩度に表れます。なおHEX（ヘックス）は、RGBの色を6桁の英数字で表すWeb用カラーコードです。
水辺のイベント案内で2色を使い分ける例
例1：浅葱色を主役にする告知バナー。イベント名を置く上部の背景に浅葱色#00A3AFを広く使い、見出しと開催日は濃い青緑#0E2B34で表示します。この組み合わせのコントラスト比は約4.85:1です。コントラスト比は文字色と背景色の明るさの差を表し、この数値なら通常の文字に求められる4.5:1を上回ります。
持ち物やアクセスの説明は、下部に水色#BCE2E8のカードを置いてまとめます。カードの本文も濃い青緑#0E2B34にすれば約10.74:1です。同じ青緑系でも、濃く鮮やかな浅葱色を告知の顔にし、淡い水色を情報整理に回せます。
例2：水色を主役にする案内ページ。ページ背景を白#FFFFFFにし、会場案内や申込手順の広い部分を水色#BCE2E8にします。本文は濃い青緑#0E2B34で約10.74:1。浅葱色#00A3AFは見出し横の短い帯や色見本として少量加えると、広い淡色の中に変化を作れます。
申込ボタンには、浅葱色を少し暗くした青緑#005663を使い、白#FFFFFFの文字を載せます。文字とボタンは約8.36:1、ボタンと水色#BCE2E8の背景は約6.05:1です。浅葱色そのものをすべての文字やボタンに使うのではなく、役割に応じて濃さを調整します。
青み・緑みの違いと読みやすさを別々に確認する
色を比べるときは、まず白#FFFFFFなど同じ背景の上に同じ大きさの色見本を並べます。次に、色相だけでなく鮮やかさや明るさを見てください。画面の設定や周囲の色で印象は変わるため、色名だけで決めず、最終的に使うHEX値で判断するのが確実です。
浅葱色#00A3AFと白#FFFFFFのコントラスト比は約3.06:1で、白文字を浅葱色の背景に載せても通常サイズの文字に必要な4.5:1には届きません。水色#BCE2E8と白#FFFFFFは約1.38:1なので、水色のカードは白い背景と境界が分かりにくい場合があります。必要なら枠線や十分な余白を加えましょう。
WCAG 2.2というWebのアクセシビリティ指針では、レベルAAの通常の文字に4.5:1以上、大きな文字に3:1以上を求めています。意味のある操作部品の輪郭などには隣接色と3:1以上が必要な場合もあります。浅葱色#00A3AFと水色#BCE2E8を隣り合わせにしたときの比率は約2.21:1なので、重要な操作状態をこの2色の差だけで表さないようにします。
HueRollでは色名ではなくHEXコードを入力して色を調整できます。選択した色と白・黒のコントラスト比は確認できますが、任意の2色間の比較やAA判定は自動では行わないため、実際の配色は組み合わせごとに別途確認してください。