Accentカラーは何色まで使える？WEBデザインで散らからない色選び

Accent（アクセント）カラーは、主要なボタンやリンク、選択中の要素など、視線を集めたい場所に使う色です。「何色まで」という共通の上限があるわけではありません。迷う場合はまず1色から始め、2色目は役割を説明できるときだけ追加すると整理しやすくなります。この記事では、エラーや成功など意味を持つ状態色は別枠とし、ブランドや強調のために使うアクセント色の数を考えます。

まず1色、必要なら2色目を明確な役割付きで追加する

たとえば背景を白 ■#FFFFFF、本文をダークブルーグレー ■#334155 にし、主要なアクセントをオレンジ ■#C2410C にします。白い文字 ■#FFFFFF を載せた主要ボタンでは約5.18:1、白背景上のリンク文字としても約5.18:1です。主要CTA（Call To Action、ユーザーに取ってほしい行動を促すボタン）や重要リンクなど、最も優先したい要素へ集中させます。

2色目が必要なら、たとえばティール ■#0F766E を「補助的な操作」や「別系統のカテゴリ表示」など限定した役割に割り当てます。白 ■#FFFFFF に対して約5.47:1です。オレンジとティールを同じ優先度であちこちに置くのではなく、どちらが主役かを固定します。

Material 3ではPrimary・Secondary・Tertiaryという3つのアクセント系カラーグループが用意されています。これは「アクセントは3色まで」という規則ではなく、複数の色を役割ごとに管理する設計例です。逆に、1色で十分なサイトなら無理に増やす必要はありません。

色数より、面積と優先順位を決める

アクセントが散らかって見える原因は、色数だけでなく、強い色が広い面積や同じ重要度で繰り返されることにもあります。HueRollの60–30–10 Paletteは、背景・補助色・アクセントを約60%・30%・10%の役割として整理する候補を確認できます。これはピクセル数を厳密に測る規則ではなく、アクセントを小さな面積に絞るための出発点として使えます。

主要アクセントの ■#C2410C をボタンや重要リンクに使い、淡いオレンジ ■#FFF7ED を補助背景に使うと、同じ系統で役割を広げられます。■#C2410C と ■#FFF7ED のコントラスト比は約4.88:1です。新しい色相を増やす前に、ティントやシェードで展開できないかを確認すると色数を抑えやすくなります。

意味を伝える色は、アクセントとは別に管理する

エラーの赤、成功の緑、警告の黄など、状態や意味を伝える色は「目立たせるためのアクセント」と同じ枠で数えるより、Semantic（セマンティック、意味を持つ）カラーとして役割を分けるほうが管理しやすくなります。W3CのUse of Colorでは、色を情報伝達の唯一の手段にしないことが求められます。状態色にはアイコンやラベル、文言なども組み合わせます。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2のContrast Minimumでは、通常サイズの文字は背景とのコントラスト比4.5:1以上が基準です。アクセントを増やすほど組み合わせも増えるため、各文字・背景・アイコンの実際の組み合わせを確認します。

HueRollでは、候補色を3桁または6桁のHEXやカラーピッカーで調整し、ティント・シェード、配色候補、60–30–10 Palette、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していないため、実際に使うアクセント同士や背景との組み合わせは別途確認します。