群青色と青はどう違う？色見本とカラーコードで比較

群青色（ぐんじょういろ）は青の仲間ですが、「青」という大きな色の呼び名と同じ意味ではありません。群青色は日本画の岩絵具にも結び付いた紫みのある青を指す一方、日常の「青」には明るい青から濃い青まで幅があります。Web制作では色名だけで指定すると、選ぶ資料やCSSの色名によって違う色になることがあります。出典別の4つの色見本を比較し、文字・背景への使い方を確かめます。

群青色は紫みの青、青はより広い色の呼び名

I-IROは群青色を「濃い紫みの青」とし、■#3E4C9C（RGB：赤62・緑76・青156）を掲載しています。和色大辞典には近い群青色■#4C6CB3（RGB：赤76・緑108・青179）もあります。一方、I-IROの「青」は「鮮やかな青」で、■#006CBA（RGB：赤0・緑108・青186）です。ここでの「青」は、その資料が提示する特定の色見本です。

さらに、CSS（Webページの文字や背景の見た目を指定する仕組み）で色名blueと書くと、MDNに記載された固定値■#0000FFが使われます。日本語の青をCSSのblueに置き換えても、I-IROの青と同じ色にはなりません。HEX（ヘックス）は「#」と6桁の英数字で色を表すコード、RGBは赤・緑・青の光の成分を数値で表す方式です。

2つの群青色のコントラスト比は約1.51：1で、色相は近いものの、明るさには差のある見本です。しかし、I-IROの群青色■#3E4C9Cと青■#006CBAでは約1.42：1、群青色■#3E4C9CとCSSの青■#0000FFでは約1.11：1になります。コントラスト比は2色の相対的な明るさの差を表す値で、色相（青み・紫みの方向）の違いそのものを測る数値ではありません。群青色は紫みのある落ち着いた方向、I-IROの青は緑み寄りの鮮やかな方向、CSSのblueはさらに純粋な青の方向です。

群青という名前は岩絵具の顔料に由来します。奈良国立博物館の正倉院展用語解説では、群青と呼ばれる青色顔料には銅の化合物を原料とするものがあり、ラピスラズリなどを指す場合もあると説明されています。歴史上の顔料に単一のHEX値が決まっているという意味ではないので、Webの色見本とは区別しましょう。

日本画の展示ページと学習サービスの案内で色を選ぶ

例A：日本画の顔料を紹介する展覧会ページ。見出し背景をI-IROの群青色■#3E4C9Cにし、「群青の表現」というタイトルを白■#FFFFFFで表示します。文字と背景は約7.72：1で、通常サイズの文字の基準も満たします。作品の説明は温かいオフホワイト■#F8F6F1の面に濃いチャコール■#263040で載せ、約12.31：1の比を確保します。淡い金色■#F5D680は短い装飾線に限り、本文を同じ金色の文字にはしません。金色と群青色の比は約5.45：1で通常文字の基準を上回りますが、今回は装飾に使うためです。「展示の詳細を見る」ボタンは群青色の面と白い文字にそろえます。

例B：学習サービスの新機能案内。広い背景を白■#FFFFFFにして、機能名や説明は濃いチャコール■#263040にします。新機能を知らせる短いラベルの背景だけI-IROの青■#006CBAにし、ラベル文字には白■#FFFFFFを合わせます。この組み合わせは約5.45：1で通常文字の基準を上回ります。小さな文字も実際の表示で確認します。主ボタンをCSSの青■#0000FFにするなら、白■#FFFFFFのボタン文字との比は約8.59：1です。青い色面が増えすぎないよう、ラベルとボタンの役割をはっきり分けましょう。

白文字の基準と、近い青同士の見分け方を確認する

白■#FFFFFFの文字に対するコントラスト比は、群青色■#3E4C9Cで約7.72：1、和色大辞典の群青色■#4C6CB3で約5.12：1、I-IROの青■#006CBAでは約5.45：1、CSSの青■#0000FFでは約8.59：1です。WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAでは、通常サイズの文字に原則4.5：1以上、大きな文字に3：1以上が必要です。今回の4色はいずれも通常サイズの白文字の基準を満たしますが、別の青にも当てはまるとは限りません。

また、群青色■#3E4C9CとI-IROの青■#006CBAは約1.42：1しかないため、隣り合う「選択中」「未選択」の色だけに使わず、ラベルや形でも状態を示します。操作部品の識別に必要な視覚情報には、隣接色と原則3：1以上が求められます。色名や画像内の印象ではなく、実際に使う背景・文字・枠線の組み合わせを確認してください。

HueRollではHEXを入力して色を調整し、選択色と白・黒とのコントラストを確認できます。ただし、任意の2色の直接比較やWCAGのAA・AAA自動合否判定には対応していません。この記事の比較値は別途計算しました。