鶯色とは?色の特徴と名前の由来を紹介

TIPS

鶯色(うぐいすいろ)は、春を告げる鳥・ウグイスの名前に由来する、くすんだ黄緑色です。明るい若葉色のような緑ではなく、黄色みと灰みを含む落ち着いた色を指します。色見本によって少し濃さが変わるため、Webで使うなら名前とカラーコードをセットで確認することが大切です。この記事では鶯色の読み方と由来、実際のウグイスの羽色との関係、画面上での色見本と文字の組み合わせを紹介します。

鶯色は「うぐいすいろ」。鳥の羽色から生まれた名前

鶯色という名前は、ウグイスの羽の色にちなみます。色名資料では、鶯色は「くすんだ黄緑」に分類されています。黄色と緑が混じったような色ですが、鮮やかな黄緑ではなく、少し茶色や灰色を感じるのが特徴です。春のイメージを持つ名前でも、明るい緑色と決めつけないことが、色見本を選ぶ際のポイントになります。

ウグイスは「ホーホケキョ」という鳴き声で知られ、「春告鳥」とも呼ばれます。実際の羽は緑がかった茶色で、一般に想像される鮮やかな黄緑とは異なります。梅や桜のそばで見かける、明るい黄緑の小鳥はメジロである場合もあります。鶯色という伝統的な色名は鳥に由来しますが、名前から実物の鳥の色や姿を一意に判断できるわけではありません。

また「鶯茶(うぐいすちゃ)」という関連した色名もあります。鶯色と鶯茶を別の色名として掲載する資料があるため、どちらを使うかは実際の見本で確認するとよいでしょう。

鶯色の色見本と、Webでの背景・文字の使い方

原色大辞典では鶯色の色見本に#928C36、I-IROでは#9D973Bが掲載されています。前者はRGBで赤146・緑140・青54、後者は赤157・緑151・青59です。RGB(アールジービー)とは、画面の色を赤・緑・青の光の成分で表す形式です。2つの見本は緑みのある黄土色に近い印象ですが、コントラスト比は約1.15:1と明るさが近く、違いを状態表示だけに使うのは避けたい組み合わせです。HEX(ヘックス)は色を6桁の英数字で指定するWeb用のコードで、鶯色に共通の唯一のHEX値があるわけではありません。

鶯色・見本A#928C36
鶯色・見本B#9D973B
生成りに近い紙色#F9F6ED
文字用の墨緑#10180F
ボタン用の深緑#17362B

例1:鶯色を大きな背景にする。「春の野鳥観察会」という告知バナーの背景を鶯色#928C36にし、見出しと短い説明を墨緑#10180Fで表示します。文字と背景のコントラスト比は約5.20:1です。コントラスト比とは、隣り合う色の明るさの差を数値で示したものです。「観察会に申し込む」ボタンは深緑#17362Bの背景に白#FFFFFFの文字を載せると約13.13:1、ボタンと外側の鶯色#928C36は約3.77:1です。開催日・集合場所などは紙色#F9F6EDの区画にまとめ、墨緑#10180Fの文字で約16.76:1を確保します。

例2:鶯色を小さな案内ラベルにする。長い解説を読む野鳥紹介ページでは、広い背景を紙色#F9F6EDにし、本文を墨緑#10180Fで表示します。文字と背景は約16.76:1です。「ウグイスの特徴」と書くラベルだけを鶯色#928C36で塗り、文字は墨緑#10180Fにすると約5.20:1になります。ラベルと周囲の紙色との差は約3.22:1です。一方、別資料の鶯色#9D973Bに変更すると、ラベルと紙色の差は約2.81:1になります。必要な区切りを保つには、墨緑#10180Fの枠を追加するなど、色の変更後に境界も見直します。

白文字の読みやすさと、色名だけでの判別に注意

基準の鶯色#928C36に白#FFFFFFの文字を載せると、コントラスト比は約3.48:1です。大きな文字の条件を満たす場合はありますが、通常サイズの本文に必要な4.5:1には届きません。長い説明や小さな文字には墨緑#10180Fを使い、約5.20:1を確保しましょう。別の鶯色#9D973Bでも、墨緑との比は約5.97:1です。

WCAG 2.2というWebコンテンツのアクセシビリティ指針のレベルAAでは、通常の文字に原則4.5:1以上、大きな文字に3:1以上が求められます。操作部品の識別に必要な枠など、文字以外の重要な表示にも隣接する色との3:1以上が必要な場合があります。鶯色の濃淡だけで「受付中」「終了」を分けず、言葉や形も添えてください。

HueRollではHEXを入力して色を調整し、選んだ色と白・黒のコントラスト比を確認できます。ただし任意の2色間の比較やAA・AAAの自動判定はできません。実際に隣り合う文字・背景・ラベル・ボタンの色は、組み合わせごとに別途確認してください。