鉛色のカラーコードを選ぶ｜背景・文字・枠で使う濃さの目安

鉛色（なまりいろ）は、金属の鉛を思わせる、青みを帯びた灰色です。Webページで使う場合、見本の鉛色をそのまま背景・文字・枠へ使い回すと、文字が薄く見えたり入力欄の境界が分かりにくくなったりします。色の濃さを役割ごとに変え、講座の申込ページを例に使い方を考えましょう。

鉛色のコードは見本によって少し異なる

鉛色のカラーコードには、青みのある灰色■#757A80や、色みをほとんど感じない灰色■#7B7C7Dなどの見本があります。色名は鉛の表面の色に由来しますが、資料によって表示する色に幅があり、すべての画面で共通のHEX値が一つだけ決まっているわけではありません。HEX（ヘックス）は「#」と英数字で色を表す形式で、ここでは6桁のコードを使います。

この記事では■#757A80を基準色とし、広い背景には薄い青灰、本文にはより濃い灰色、入力欄の枠には中間の灰色を選びます。実物の鉛の金属光沢は、単色のカラーコードだけでは再現できません。

背景・文字・枠に使う鉛色の濃さを変える

背景：情報が多い画面は明るい青灰を広く使う

講座の申込ページでは、全体の背景を淡い青灰■#F3F5F7、日時や料金を載せるカードを白■#FFFFFFにします。案内事項を目立たせる帯だけは、鉛色を濃くした■#59636Dを使い、帯の文字を白■#FFFFFFにします。背景全体を中間色の鉛色にするより、本文のある面を明るく保ちながら濃い帯で区切る配置です。

文字：小さい情報は基準色より濃くする

白■#FFFFFFのカードでは、見出しと主要な本文を濃い灰色■#3B444Cにし、補足文や日時を青みのある濃い灰色■#535E68にします。見本の鉛色■#757A80は大きな見出しや短い飾りには使えますが、通常サイズの説明文にはそのまま流用しません。大事な申込ボタンは■#3B444Cで塗り、文字を白■#FFFFFFにすると、濃さの役割を統一できます。

枠：入力欄の輪郭には一段はっきりした灰色を選ぶ

氏名などを入力する白■#FFFFFFの欄が、淡い青灰■#F3F5F7の上に並ぶ場合は、必要な輪郭に灰色■#79838Dを使います。淡い枠色■#D0D5DAは装飾としては控えめですが、入力欄があることを伝える唯一の手がかりにはしません。ラベルを濃い灰色■#3B444Cで表示し、操作中のフォーカス表示も枠とは別に確認します。

文字と境界のコントラストは別々に判定する

コントラスト比とは、隣り合う色の明るさの差です。Webコンテンツのアクセシビリティ指針「WCAG 2.2」のAA基準では、通常サイズの文字は4.5:1以上、大きな文字は3:1以上が必要です。基準色の鉛色■#757A80と白■#FFFFFFは約4.33:1、淡い青灰■#F3F5F7とは約3.96:1で、通常サイズの文字の基準には届きません。

一方、濃い灰色■#3B444Cと白■#FFFFFFは約9.92:1、補足文の灰色■#535E68と淡い背景■#F3F5F7は約6.06:1です。濃いお知らせ帯■#59636Dに白■#FFFFFFの文字を載せた場合も約6.12:1となり、いずれも通常サイズの文字の基準を満たします。

操作に必要な入力欄の輪郭やアイコンには、隣接する色との比が原則3:1以上求められます。枠の灰色■#79838Dは白■#FFFFFFと約3.86:1、淡い背景■#F3F5F7と約3.53:1です。対して淡い枠色■#D0D5DAと白■#FFFFFFは約1.48:1しかありません。装飾用の線と、操作の識別に欠かせない枠は区別しましょう。

HueRollが確認できるのは選んだ色と白・黒とのコントラストです。ここで使った青灰と別の灰色など任意の2色の比やAAの自動判定には対応していないため、実際の組み合わせを別途計算して確かめてください。