鉄紺とネイビーの違いは？濃い青の色選び
鉄紺（てつこん）とネイビーは、どちらも暗い青ですが、同じ色とは限りません。鉄紺には鉄色がかった紺という伝統色の意味があり、ネイビーは一般的な色名として幅広く使われます。この記事では鉄紺#17184Bと、WebのCSSで色名「navy」を指定したときの#000080を並べ、色の違いとバナーでの選び方を説明します。HEX（ヘックス）はWebの色を6桁の英数字で指定するコードです。
鉄紺は落ち着いた深い青、CSSのnavyは青みの強い濃色
鉄紺は、藍染による紺色の中でも鉄色を思わせる暗さを持つ色名です。今回の鉄紺#17184BはRGBで赤23・緑24・青75。RGBは画面の色を赤・緑・青の光の成分で表し、それぞれ0～255の数値を使います。青の成分が多いものの赤と緑も含むため、黒に近い、ややくすんだ青に見えます。
一方、CSSの色名「navy」は#000080で、RGBは赤0・緑0・青128です。青以外の成分がなく、今回の鉄紺より青の鮮やかさが目に入りやすい見本です。ただし「ネイビー」という一般的な呼び名が、常にCSSのnavyと同じ色を意味するわけではありません。
鉄紺のHEX値も統一されておらず、別の色見本には#0B1644という例があります。色名だけを制作担当者に伝えるより、採用するHEXコードを指定する方が確実です。なお、今回の鉄紺#17184BとCSSネイビー#000080は明るさが非常に近く、2色間のコントラスト比は約1.03:1です。色の名前が違っても、明るさの差で区別できるとは限りません。
天体観察会のバナーで濃い青を入れ替える
例1：鉄紺を背景にした落ち着いた案。「星空観察会」のバナー背景を鉄紺#17184Bにし、見出しと短い説明を温かみのあるオフホワイト#F7F5EFにします。文字と背景のコントラスト比は約15.18:1です。コントラスト比は、隣り合う色の明るさの差を示す数値です。日時や集合場所は淡い青灰色#EEF2F8の案内カードへ移し、文字を濃いブルーグレー#273449にすると約11.17:1になります。
「参加を申し込む」ボタンは鉄紺の面の上に淡いゴールド風の黄#E6C98Eで置き、文字を鉄紺#17184Bにします。ボタンの文字と背景の比は約10.33:1で、ボタンと周囲の鉄紺との比も約10.33:1です。暗い青を広く使い、明るい色を見出しと操作部分に集中させます。
例2：CSSネイビーを背景にした鮮明な青の案。レイアウトは変えず、バナーの背景だけをCSSネイビー#000080にします。オフホワイト#F7F5EFの文字との比は約14.68:1です。案内カードは同じ淡い青灰色#EEF2F8、文字は濃いブルーグレー#273449のまま使えます。ボタンも黄#E6C98Eを維持し、ボタン内の文字をネイビー#000080にすると約9.99:1です。文字やボタンの読みやすさを保ちつつ、青みの強い画面に変えられます。
2つの濃い青だけで状態を分けない
鉄紺#17184Bとネイビー#000080は約1.03:1の差しかないため、タブの選択中・未選択や重要度を、この2色の違いだけで示すのは避けます。現在位置には下線や太字、アイコンなども加えましょう。また、黄#E6C98Eとオフホワイト#F7F5EFの比は約1.47:1なので、淡い背景に黄色い小さな文字や重要な線を置くのには向きません。
WCAG 2.2（Webコンテンツのアクセシビリティ指針）のレベルAAでは、通常サイズの文字に4.5:1以上、大きな文字に3:1以上を原則求めています。操作に必要な表示など文字以外の重要な情報は、隣接色との3:1以上が必要な場合もあります。HueRollではHEX入力と選択色の白・黒に対するコントラストを確認できますが、任意の2色間の比較やAAの自動判定はできません。最終的に使用する背景と文字・ボタンの組み合わせを別途確認してください。