ブランドカラーが使いづらいときはどうする？WEB向けに整える方法

ブランドカラーをWEBサイトに置くと、ロゴには合うのに文字やボタンでは使いにくいことがあります。すでにロゴや印刷物で使われている色を勝手に変更できない場合は、元の色を守りながら、文字や操作に別の色を割り当てる方法があります。架空の「手仕事市」の出店申込ページを例に、何を固定し、どこを調整するかを説明します。

変更できないブランド色と、画面で必要な色を分ける

ブランドカラーとは、店やサービスを識別してもらうために継続して使う色です。最初にロゴの色指定や使用ルールを確認し、色を変更してよい範囲を整理します。ロゴの指定色が固定でも、本文の文字色、申込ボタン、入力欄の線まで同じ色にする必要はありません。

使いにくさを「白い背景では文字が薄い」「色付きボタンに白文字を載せると読みにくい」「淡い面に置く入力欄が見分けにくい」のように、実際に困る場所に分けます。色名だけで判断せず、背景と文字を組み合わせて確認します。HEX（#に続く6桁の英数字で色を指定する形式）は、色を比較するときの共通の記録に使えます。

色を変えられないときの基本は、ブランド色をロゴや短い案内帯に残し、操作には機能上必要な色を別に用意することです。新しい操作色を「正式なブランドカラー」と呼び替えるのではなく、「申込ボタン用」「リンク用」など役割を明記して管理します。

手仕事市の出店申込ページで元の色を残す例

ポスターとロゴで使用している黄橙色 ■#F3BD66 を、変更できないブランド色と仮定します。白 ■#FFFFFF をこの色の上の通常文字にすると、コントラスト比（2色の相対的な明るさの差）は約1.71:1です。そこで開催日の案内帯は元の黄橙色 ■#F3BD66 のまま、文字を濃い青灰色 ■#24303B にすると約7.87:1になります。色を変えず、文字との組み合わせを直す方法です。

• 案内ページと申込フォーム：全体の背景を温かいオフホワイト ■#FAF8F3、申込欄を白 ■#FFFFFF にし、見出しと本文を濃い青灰色 ■#24303B にします。本文はオフホワイトに対して約12.68:1、白に対して約13.45:1です。
• 出店申込ボタンとリンク：ボタンの背景は濃い青緑 ■#195C72、文字は白 ■#FFFFFF とし、約7.46:1を確保します。ボタンと周囲のオフホワイト ■#FAF8F3 は約7.03:1です。本文中のリンクにも濃い青緑 ■#195C72 を使いますが、下線を付け、色だけでリンクだと判断させません。
• 入力欄と申込状態：白 ■#FFFFFF の入力欄にグレー ■#64717A の枠を付けると、約5.02:1です。出店区画の選択結果は「選択中」、募集終了は「受付終了」と文字でも示し、ブランドの黄橙色を塗るだけで意味を伝えないようにします。

なお、白 ■#FFFFFF の申込欄とオフホワイト ■#FAF8F3 の背景の差は約1.06:1です。申込欄の区切りが重要なら、見出し、余白、必要に応じて十分に識別できる枠線を加えます。ブランドの色を残す場所と、操作を分かりやすくする場所を分ければ、ロゴ色を変えずに画面を整えられます。

変更後はブランド規定と操作性を別々に確認する

色の一覧には「ブランド固定色」「背景」「本文」「主要操作」「入力欄の枠」のように役割を付け、使う画面を記録します。キャンペーンページと申込画面で同じ操作に別の色を使っていないかも確認します。ロゴを変更しない方針でも、見出しやボタンに独自の色を用意できるかは運用ルール次第なので、担当者と確認しましょう。

WCAG 2.2（WEBコンテンツのアクセシビリティに関するガイドライン）のレベルAAでは、通常サイズの文字は背景と原則4.5:1以上、操作部品の識別に必要な輪郭などは隣接色と原則3:1以上のコントラストが基準です。ロゴを構成する文字には文字コントラストの例外がありますが、その色を一般の案内文やボタンへ使う場合まで例外になるわけではありません。キーボード操作時のフォーカス表示やスマートフォンでの見え方も確認します。

HueRollではHEX入力から色を調整し、関連色の候補や選択色と白・黒のコントラストを確認できます。ただし、任意の2色を比較したり、WCAGのAA・AAAを自動判定したりはできません。ここで示した組み合わせの数値は別途計算したものです。