新しいアクセントカラーを追加する前に確認したいこと

WEBサイトで「おすすめ」や新機能をもっと目立たせたいとき、新しいアクセントカラーを増やすべきか迷うことがあります。アクセントカラーとは、周囲の色と差をつけて一部の情報に注意を向ける色です。ただし、色を増やせば必ず伝わりやすくなるわけではありません。まず既存色の役割を確認し、本当に必要な場所にだけ追加する手順を紹介します。

既存の色と表示方法で代用できないか確認する

最初に、ページ背景、本文、リンク、主な操作ボタン、選択状態、エラー表示に使っている色を整理します。「どの色が何を意味するか」を書き出し、同じ役割なのに別の色になっていないかも確認します。すでに強調用の色があるなら、新しく足す前に使い回せるか検討しましょう。

例えば料金比較ページで「おすすめプラン」を示したい場合、最初は「おすすめ」という文字を添えたり、カードの順番や余白を調整したりします。それでも通常のプランと区別しづらいときに限り、新しい色を候補にします。情報の重要度を上げる目的なのか、クリックする場所を増やしたいのかを曖昧にしないことが大切です。

また、エラーや成功などの状態色を装飾に転用しないようにします。同じ赤が「入力エラー」と「おすすめ商品」を表すと、画面内で色の意味が揺らいでしまいます。追加すると決めたら、対象を「おすすめの表示ラベル」など一つの役割に絞ります。

料金表にアクセントカラーを1色だけ加える例

青いボタンを使う架空のサービス料金表を想定します。以下のHEXカラーコードは、「#」に続く6桁の数字と英字でWEB上の色を指定する方法です。

ページとカードの背景は白の■#FFFFFF、通常の文字は濃いグレーの■#1F2937とします。文字と背景のコントラスト比は約14.68:1です。全プランに共通する「申し込む」ボタンは青の■#1D4ED8を背景に、白の■#FFFFFFを文字色とし、比は約6.70:1です。新色を足しても、申込みボタンの役割と色は変えません。

おすすめプランのカードには、小さな「おすすめ」ラベルだけを追加します。背景を落ち着いたオレンジ系の■#B45309、文字を白の■#FFFFFFにすると、コントラスト比は約5.02:1です。ラベルはボタンではないため、クリックできるように見せる必要はありません。表示する文字とカード内の位置を統一し、色だけでものを区別しない構成にします。

より明るいオレンジの■#F59E0Bも候補ですが、その背景に白の■#FFFFFFを重ねると約2.15:1で、通常サイズの文字に必要な基準を満たしません。同じ背景でも濃いグレーの■#1F2937文字なら約6.83:1です。色名や鮮やかさだけで判断せず、実際に重ねる文字との組み合わせを比べます。

こうすれば新色は「おすすめ」ラベルの役割だけを持ち、既存の青いボタンは引き続き「申し込む」を示します。料金表全体をオレンジで塗り替えるより、ラベルの面積を小さく保つほうが、情報の優先順位を整えやすくなります。

追加後はコントラストと運用範囲を確認する

WCAG（Web Content Accessibility Guidelines：WEBコンテンツを利用しやすくするための指針）のAA基準では、通常サイズの文字は背景とのコントラスト比4.5:1以上、大きな文字では3:1以上が原則です。操作部品や意味のあるアイコンの識別に必要な部分は、隣接する色と原則3:1以上を確認します。ラベルの文字だけでなく、別の背景に置いたときの見え方も調べてください。

新色を使う場所は料金表、一覧カード、スマートフォン表示などで確認します。装飾が増えすぎて通常の購入ボタンを弱くしていないか、色を見分けにくい人にも「おすすめ」の文字で意味が伝わるかを見直します。選択中やエラーなど、既存の状態表示と取り違えないことも重要です。

CSS（WEBページの見た目を指定する仕組み）で色を管理している場合は、「おすすめラベルの背景」のように役割が分かる名前で設定します。適用する場所と担当者を共有し、将来ラベルが不要になったらその設定だけ戻せるようにしましょう。追加する前に役割と使用範囲を決めることが、色を増やしすぎないための実務的な確認になります。