ダックブルーとはどんな色？カラーコードと組み合わせのヒント

ダックブルーは、青に少し緑みを感じる、深めの青系の色です。鮮やかすぎない暗さがあり、Webサイトでは濃い背景や見出しの色として使えます。ただし、色名資料によってカラーコードに小さな違いがあり、背景の明るさを変えると文字やボタンの見え方も変わります。代表的な色見本を比べ、水辺の写真展の案内ページを例に、組み合わせる色と使い方を紹介します。

ダックブルーは青緑寄りの深い青。色名資料でコードを比較する

洋色大辞典ではダックブルー（duck blue）を■#007199、RGBで赤0・緑113・青153としています。一方、カラーサイト.comでは■#007394、RGBで赤0・緑115・青148と示しています。RGBは画面の色を赤・緑・青の光の成分で表す方法で、HEX（ヘックス）はそれを「#」と6桁の英数字で指定する方法です。

この2つの参考色■#007199と■#007394のコントラスト比は約1.02:1で、明るさは非常に近く、見本では青みや緑みが少し異なります。色名には唯一のコードが決まっているとは限りません。Web制作では採用したHEXをデザイン担当者間で共有しましょう。以下の配色例では洋色大辞典の■#007199を基準にします。

また、ダックブルーと「ダックエッグブルー」は名前が似ていますが、同じ色名として扱わないようにします。後者は淡い青緑を指す商品名などにも使われます。今回のダックブルー■#007199は、明るいパステルブルーではなく、より深い青を想定しています。

水辺の写真展の案内ページで組み合わせる色を決める

例えば水辺の風景を集めた写真展のWeb案内ページでは、作品写真と「開催日」「会場」「予約する」の情報を並べます。写真の青を変えるのではなく、その周囲の面積と文字色を調整して主役を明確にします。

• 濃い背景を主役にする案：ページ上部の大きな案内面をダックブルー■#007199にし、写真展名を白■#FFFFFFで表示します。文字と背景の比は約5.49:1です。開催日を示す小さなラベルにはサンドベージュ■#EFE3D0の面と濃い青灰■#263A45の文字を使い、約9.34:1の差を確保します。ラベル面とダックブルーの背景の比も約4.34:1です。「予約する」ボタンはオフホワイト■#F8F4EBの面に濃い青灰■#263A45の文字を載せ、文字と面を約10.79:1にします。
• 明るい背景を主役にする案：ページ全体はオフホワイト■#F8F4EB、見出しはダックブルー■#007199にします。見出しと背景の比は約5.01:1です。説明文は濃い青灰■#263A45で約10.79:1を確保します。写真の下の補足カードを淡い青緑■#E2F0F2にし、その中の短い見出しにダックブルー■#007199を使えば約4.70:1です。「予約する」ボタンはダックブルーの面に白■#FFFFFFの文字を載せます。

前者は展示の導入を短く印象付けたいとき、後者は複数の写真と説明を落ち着いて読んでもらいたいときの例です。青を使う場所を決めたら、本文をすべて青にしたり、写真の上へ細かい文字を重ねたりせず、色の役割を整理します。

文字コントラストと淡いカードの境界を確認する

基準のダックブルー■#007199に白■#FFFFFFの文字を置く比率は約5.49:1、別資料のダックブルー■#007394でも約5.41:1です。どちらも通常文字の4.5:1以上を満たしますが、色を明るく調整した場合は再計算が必要です。一方、濃い青灰■#263A45をダックブルー上の文字にすると約2.15:1で不十分です。暗い面では白寄りの文字を使います。

オフホワイト■#F8F4EBと淡い青緑■#E2F0F2の面同士の比は約1.06:1しかありません。詳細カードを明確に区切る必要がある場合は深いブルー■#005577の枠線を使い、線とカードを約7.01:1、線と外側の背景を約7.46:1にできます。装飾用カードでは、余白や見出しで区切る方法もあります。

なお、サンドベージュ■#EFE3D0をダックブルー■#007199の背景上の通常文字に使った場合は約4.34:1で、通常文字の基準には届きません。先ほどの案では、サンドベージュは文字ではなくラベルの背景にし、濃い青灰■#263A45の文字を重ねています。

WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAでは、通常文字に原則4.5:1以上、大きな文字に3:1以上のコントラスト比が求められます。操作部品の識別に必要な視覚的な手がかりにも、隣接色と原則3:1以上が必要です。ただし、すべての装飾カードに濃い輪郭が必要とは限りません。

HueRollではHEXコードを入力して色を調整し、RGBなどの数値や配色候補、選択色と白・黒のコントラストを確認できます。ただし、色名の直接入力、任意の2色同士の比較、WCAGの自動判定には対応していません。ここで示したオフホワイト・サンドベージュ・文字色・輪郭線などの比率は、別途2色ずつ計算したものです。