藍鼠とはどんな色？カラーコードと落ち着いた配色例

藍鼠（あいねず）は、藍色がかった灰色のことで、「あいねずみ」とも読みます。一般的なグレーほど無彩色ではなく、濃い藍色ほど青が強くない、落ち着いた青みの灰色です。この記事では藍鼠■#6C848Dを基準に、色の特徴とWebサイトでの具体的な配色例を紹介します。伝統色の色名には資料ごとに異なる色見本があるため、このカラーコードは記事で使う一例です。

藍鼠のカラーコードと普通のグレー・藍色との違い

今回の藍鼠■#6C848Dは、RGBで赤108・緑132・青141です。RGBは赤・緑・青の光を0～255の数値で表す形式で、HEX（ヘックス）はその色を6桁の英数字で表すWeb用のコードです。青と緑が赤より多いため、灰色の中に青みを感じる色になっています。

比較用に、標準的な中間グレーの一例■#808080と、濃い藍色の一例■#234B6Aを並べます。グレーは赤・緑・青が同じ値ですが、藍鼠は青の割合が少し高く、藍色はさらに暗く青みが強い色です。これらも比較用の色見本であり、色名からHEX値が一つに決まるわけではありません。

書籍紹介ページとイベントバナーの配色例

例1：古書店の書籍紹介ページ。ページ全体をごく淡い青みのグレー■#F2F5F4にし、見出しを濃い青灰色■#203643、本文をチャコール■#26343Dにします。見出しと背景のコントラスト比は約11.46:1です。コントラスト比とは、文字と背景の明るさの差を数値で表すものです。

本の表紙を並べるカードは白■#FFFFFFにし、カードの輪郭に藍鼠■#6C848Dの線を使います。藍鼠の線と外側の背景■#F2F5F4は約3.60:1、カード内の白■#FFFFFFとは約3.95:1の差があります。カード内の説明文字にはチャコール■#26343Dを使い、白背景との比は約12.80:1。「詳細を見る」ボタンは濃い青灰色■#203643に白■#FFFFFFの文字を載せ、約12.57:1とします。藍鼠を文字色として広く使うより、枠や区切りに使う構成です。

例2：読書会の告知バナー。藍鼠■#6C848Dを大きな背景に使い、「秋の読書会」などの見出しを白■#FFFFFFで載せます。この組み合わせは約3.95:1なので、見出しは通常の文字ではなく、24px以上の大きな文字として使う前提です。日時・参加方法など小さな文字は淡い青みのグレー■#F2F5F4のパネルに移し、濃い青灰色■#203643で表示します。パネルの文字は約11.46:1です。

申込みボタンもパネルの上に置き、濃い青灰色■#203643の背景と白■#FFFFFFの文字で約12.57:1を確保します。藍鼠がバナーの雰囲気を作り、詳しい案内と操作部分は明るい面にまとめる方法です。

藍鼠を文字色にするときのコントラストに注意

藍鼠■#6C848Dに白■#FFFFFFの通常サイズの文字を載せた場合、約3.95:1で文字の基準には届きません。また、淡い背景■#F2F5F4の上に藍鼠■#6C848Dで小さな本文を書くと約3.60:1です。落ち着いた見た目でも、どちらも通常の文字には使わず、濃い文字色に替えるか、背景を調整しましょう。

WCAG 2.2というWebのアクセシビリティ指針では、レベルAAの通常サイズの文字に4.5:1以上、大きな文字に3:1以上を求めています。必要なカード境界や操作部品の表示など、文字以外の重要な情報には隣接色との3:1以上が求められる場合もあります。ただし細い線は計算上の比率を満たしても見えにくいことがあるため、太さや実際の表示も確認します。

HueRollではHEXコードを入力し、選択色と白・黒とのコントラスト比を確認できます。任意の2色の比較やAA判定には対応していないため、記事で提案した組み合わせは別途確認してください。