山吹色のボタンには何色の文字？白と黒を比べる色選び

山吹色のボタンに文字を載せるとき、白と黒のどちらがよいのでしょうか。明るい黄色系の山吹色では、白文字は背景に近い明るさになり、黒文字のほうがはっきり区別できます。ただし、文字を濃くするだけでは、白いページの上でボタン自体が埋もれる場合もあります。この記事では白・黒のコントラスト比を比べ、ボタンを置く背景ごとの調整を紹介します。

山吹色のボタンは白文字より黒文字が適している

和色大辞典に掲載された山吹色の一例は■#F8B500です。山吹色という名前がすべての制作物で同じ数値を指すわけではないため、ここではこの色を基準に考えます。HEX（ヘックス）は、Webの色を「#」と6桁の英数字で指定する方法です。

山吹色■#F8B500をボタンの背景に固定して文字色を比べると、次のようになります。コントラスト比は、文字と背景の相対的な明るさの差を示す数値です。

黒■#000000と山吹色■#F8B500の比は約11.60:1で、白■#FFFFFFとの約1.81:1を大きく上回ります。濃い茶■#302817も約8.05:1あるため、真っ黒の印象を少しやわらげたい場合の候補です。白文字は大きく太くしても、今回の比率では十分な差を確保できません。

WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAでは、通常サイズの文字に原則4.5:1以上、大きな文字に3:1以上のコントラスト比が必要です。ここで比較した山吹色では、通常文字のボタンラベルには黒や濃い茶を選びます。

白いページと濃い見出し帯ではボタンの見せ方を変える

例えば、秋の工芸市の来場予約ページで「来場を予約する」ボタンを一つ設ける場面を考えます。ボタンの色は山吹色のままにし、周囲の背景に合わせて輪郭や余白を調整します。

• 白い申込欄に置く場合：周囲を白■#FFFFFF、ボタンを山吹色■#F8B500、ラベルを黒■#000000にします。文字とボタンは約11.60:1ですが、黄色の面と白い周囲は約1.81:1です。輪郭が必要なら濃い黄茶■#5D4100の枠線を添えます。この線は白と約9.45:1、山吹色と約5.22:1の差があります。
• 生成り系の説明欄に置く場合：周囲を暖かいオフホワイト■#FFF9EFにすると、山吹色■#F8B500との比は約1.73:1です。ここでも黒■#000000のボタン文字を使い、必要なら同じ黄茶■#5D4100の枠線を加えます。枠線とオフホワイトの比は約9.02:1です。周囲の説明文は濃い茶■#302817にすると約13.91:1になります。
• 濃い見出し帯に置く場合：案内帯をダークネイビー■#1F2937にし、帯の見出しは白■#FFFFFFにします。この文字と帯は約14.68:1です。山吹色■#F8B500のボタンは帯との比が約8.11:1あり、ボタン内の文字は引き続き黒■#000000を使えます。周囲が暗くなっても、黄色の上に白文字を載せる理由にはなりません。

同じ山吹色のボタンでも、白いページでは境界が弱く、暗い帯では輪郭がはっきりします。背景だけを見て文字を白に変えるのではなく、ボタンの内側と外側を別々に確認することが重要です。

ボタンの輪郭と操作状態は文字色と分けて確認する

ボタンを押せる場所として示すには、ラベルを「予約する」など具体的な操作名にし、上下左右に十分な余白を取ります。輪郭線を付けるなら細すぎて見失わないかも確認しましょう。WCAGの非テキストコントラストの考え方では、ボタンの境界が操作部品を識別するために不可欠な場合、その視覚的な手がかりには隣接色と原則3:1以上の差が求められます。ただし、文字で操作部品を識別できる場合に、すべてのボタンへ3:1の枠線が必須になるわけではありません。

マウスを重ねた状態やキーボードで選択した状態も、色の変化だけに頼らず輪郭などで分かるようにします。スマートフォンでは、ボタンの文字が小さすぎないか、押す場所の周りに十分な間隔があるかも見直しましょう。

HueRollでは山吹色のHEXを入力して調整し、選択した色と白・黒のコントラストを比較できます。ただし、任意の2色間の比較やWCAGの自動判定には対応していません。今回の濃い茶・黄茶・周囲の背景との比率は、別途計算して確認したものです。