WEBデザインのアクセントカラーとは？目立たせたい場所への使い方
アクセントカラーとは、WEBサイトの中で特に注目してほしい操作や情報に使う強調色です。鮮やかな色を多く置くことではなく、どこに使わないかも決めると効果を整理できます。地域のランニング大会の申込みページを例に、エントリーボタン・締切情報・補助リンクの役割を分ける方法を紹介します。
アクセントカラーは「最初に見つけてほしい場所」に使う
ページの広い背景を支えるベースカラー、見出しや案内欄をまとめるメインカラーに対して、アクセントカラーは次の行動へ視線を向けるために使います。たとえば大会の説明、種目、集合場所を読んだ後に押してほしい「エントリーする」ボタンが候補です。色を決める前に、画面の主な目的を一つ選びましょう。
アクセントは必ず赤やオレンジである必要はなく、ページの周囲と十分に区別できる青や緑でも構いません。また、すべての見出し、リンク、枠線をアクセント色にすると、どれが重要なのか分かりにくくなります。色だけに頼らず、ボタンの形・文言・配置でも操作を伝えます。
ランニング大会の申込みページで使う場所を絞る
ここでは、広いページ背景・種目案内のカード・申込み操作を分けます。HEXは、WEBの色を16進数で表すカラーコードです。以下のコントラスト比は、隣り合う2色の相対的な明るさの差を示します。
申込みボタンにアクセントを集中させる
ページ背景を明るいグレー ■#F5F7F6、本文を濃いグレー ■#26353Cにすると、文字と背景の比率は約11.78:1です。見出しには深い青灰 ■#244C60を使い、同じ背景 ■#F5F7F6と約8.57:1を確保します。
主要な「エントリーする」ボタンには深い赤橙 ■#A84725を選び、文字は白 ■#FFFFFFにします。文字とボタンの比率は約5.84:1、ボタンとページ背景 ■#F5F7F6の比率は約5.43:1です。広い面を控えめにして、この操作に色を集中させます。
締切情報も同じ色で小さく強調する
種目案内欄の背景には淡い青灰 ■#E7F0F1を使い、補足の説明には濃いグレー ■#26353Cを合わせます。文字と背景の比率は約10.94:1です。「申込締切：11月20日」のような仮の案内では、締切の文字だけを赤橙 ■#A84725にすると、同じ青灰背景 ■#E7F0F1に対して約5.05:1です。色だけで締切を示さず、必ず「申込締切」と日付を文字で記します。
アクセントをボタンと少数の重要情報に限定すれば、写真や普通の案内まで赤橙にする必要はありません。実際の締切日や開催情報は、公開するイベントの内容に合わせて記載します。
補助リンクとカードの境界には別の役割を与える
「コースの詳細を見る」は濃い青 ■#245A74の下線付きリンクにし、淡い青灰背景 ■#E7F0F1と約6.50:1の文字コントラストを確保します。受付カードを白 ■#FFFFFFにする場合、周囲の青灰 ■#E7F0F1との面の差は約1.16:1と小さめです。カード全体が選べる操作部品なら、グレー青 ■#6B8188の枠線で白い面 ■#FFFFFFと約4.10:1、外側の青灰 ■#E7F0F1と約3.54:1の差を付けられます。
選択中のカードは「選択中」の文字やチェック表示でも示します。「受付終了」などの状態表示は、アクセント色と混同させず、意味が分かる言葉を必ず添えます。
目立たないときは色より先に、背景と使用箇所を見直す
たとえば淡いオレンジ ■#E7A887を明るいグレー背景 ■#F5F7F6のボタンにすると、面同士の比率は約1.89:1で境界が弱くなります。さらに白文字 ■#FFFFFFを載せた場合は約2.03:1しかありません。色名が同じオレンジでも、深い赤橙へ調整すると文字と背景の両方に明暗差を作れます。
また、赤橙 ■#A84725を濃い青灰の案内帯 ■#244C60に直接置くと、面同士は約1.58:1で、ボタンが埋もれる場合があります。必要に応じて明るい面へ移すか、境界を補いましょう。色を増やす前に、最も押してほしい操作が一目で分かる位置と大きさか確認します。
マウスを重ねたホバー時にボタンを濃い赤茶 ■#8B341Dへ変える場合、白文字 ■#FFFFFFとの比率は約8.06:1です。キーボードなどで操作対象になったフォーカス状態には、少し離した濃い青 ■#214860の輪郭を付ける方法があります。輪郭とページ背景 ■#F5F7F6は約9.03:1、案内欄の背景 ■#E7F0F1とは約8.39:1です。
WCAG 2.2（Web Content Accessibility Guidelines：WEBコンテンツのアクセシビリティ指針）のAA水準では、通常サイズの文字と背景に原則4.5:1以上、大きな文字には3:1以上が必要です。操作を識別するのに必要な非テキスト表示には隣接色との3:1以上が求められます。HueRollでは選択色と白・黒のコントラスト比を確認できますが、任意の背景との組み合わせは別に検算してください。スマートフォンでもアクセントの使いすぎやボタンの操作状態を確認しましょう。