アイコンの色はどう決める？WEBデザインになじませる配色のコツ

WEBサイトのアイコンは、小さくても情報の意味や操作の場所を伝える役割を持ちます。すべてをブランドカラーにそろえると統一感は出せますが、背景によっては見えにくくなります。反対にアイコンごとに別の色を付けると、何が重要か分かりにくくなることもあります。まず装飾・設備案内・操作という用途を分けて、周囲の背景と文字色に合わせて決めましょう。ここでは市民ホールの館内設備案内ページを例に説明します。

アイコンは「飾り・情報・操作」で必要な色の強さを分ける

背景の音符模様のような装飾アイコンは、見えなくても内容や操作が変わらない要素です。こうした装飾には淡い色を使えます。一方、エレベーターやロッカーの場所を示す情報アイコンは、形が意味の理解に必要なら背景との明暗差を確保します。地図を拡大する操作アイコンは、ボタンがあることや操作方法が分かる色にします。

WCAG 2.2（WEBコンテンツのアクセシビリティ指針）では、意味を理解するために必要な図形や、操作部品を識別するための視覚情報に、隣接する色と原則3:1以上のコントラスト比が求められます。コントラスト比は、色同士の相対的な明るさの差を示す数値です。ただし、情報が隣の文字で同等に伝わるアイコンや、純粋な飾りがすべてこの基準の対象となるわけではありません。通常サイズの文字は原則4.5:1以上、大きな文字は3:1以上を別に確認します。

アイコンの色だけで用途を伝えず、「トイレ」「ロッカー」「地図を拡大」などの文字を添えると意味が明確になります。色をそろえる目的は、すべてを同じ濃さにすることではなく、同じ役割のアイコンを同じルールで表示することです。

市民ホールの設備案内ページに使う配色例

ホールへの行き方、トイレ・ロッカー・エレベーターの案内、館内図の拡大ボタン、設備の休止情報があるページを想定します。HEXはWEBで色を指定する16進数のコードです。

• ヘッダー：深いグリーン■#26594Bを背景に白■#FFFFFFで施設名を表示します。文字と背景のコントラスト比は約8.04:1です。施設案内に共通する基準色として使います。
• 本文と見出し：温かみのあるオフホワイト■#F8F7F2に濃いグレーグリーン■#283A33で説明すると約11.23:1です。見出しには深いグリーン■#26594Bを使い、同じ背景と約7.49:1を確保します。
• 設備一覧のカード：白■#FFFFFFに濃いグレーグリーン■#283A33で設備名を書けば約12.05:1です。ただし、白■#FFFFFFと周囲のオフホワイト■#F8F7F2の差は約1.07:1のため、グレーグリーン■#73857Bの枠線も使います。枠線と白の比率は約3.91:1です。
• トイレ・ロッカーなどの案内アイコン：白■#FFFFFFのカード上では、濃い青緑■#2B6358のアイコンを共通で使います。アイコンと背景は約6.93:1です。形の違いに加えて、横に設備名を文字で表示します。
• エレベーターの案内欄：淡いグリーン■#E8F1EBの背景に青緑■#2B6358のアイコンを置くと約6.01:1です。説明文をグレーグリーン■#283A33にすれば約10.45:1です。アイコンだけで経路や利用条件が分かったことにせず、案内文を併記します。
• 選択中の階の表示：館内図で選んだ階には淡いミント■#E1EEE6の面と深いグリーン■#245C4Dの階表示アイコンを使います。図形と背景は約6.48:1です。淡いミント■#E1EEE6とページ背景■#F8F7F2の差は約1.11:1なので、グレーグリーン■#73857Bの枠線も付けます。枠線とミントは約3.27:1です。「2階を表示中」と文字でも伝えます。
• 「地図を拡大」ボタンのアイコン：ボタンを濃いブルーグリーン■#245E70、虫眼鏡アイコンを白■#FFFFFFにすると約7.22:1です。ボタン面とオフホワイト■#F8F7F2の差は約6.73:1です。できるだけ「地図を拡大」の文字を付け、アイコンだけにする場合も支援技術向けの名前を設定します。
• 休止中の設備表示：「ロッカー一時休止」などの短い注意表示には、深い赤茶■#96472Fの背景と白■#FFFFFFのアイコン・文字を使います。アイコン・文字と背景は約6.48:1です。注意の意味は赤茶という色だけに任せません。
• 装飾の音符アイコン：オフホワイト■#F8F7F2に淡いセージ■#BBD7C9で模様を入れると約1.43:1です。この色は重要な設備案内には不足しますが、意味のない飾りなら控えめに使えます。

設備案内は青緑、操作はボタンの青、休止情報は赤茶と文字で伝え、装飾は淡くします。すべてのアイコンを一色にするより、役割ごとのルールをそろえる方法です。

線の太さと文字による説明も最後に確かめる

細い線だけで描いたアイコンは、数値上のコントラストが十分でも実際の画面では見えにくい場合があります。スマートフォンの小さいサイズでも形が分かる太さにし、写真の上に置く場合は背景が変化することを考えて単色の面を敷きます。

アイコンだけのボタンには、支援技術に伝わる操作名が必要です。例えばHTML（WEBページの構造を指定する言語）の aria-label 属性で「地図を拡大」と設定できます。文字付きボタンの横に置く単なる飾りなら、重複読み上げを避けるため aria-hidden="true" を使う場合もあります。ただし、意味を伝えるアイコンまで隠さないようにします。

HueRollでは選択した色と白・黒のコントラストを確認できますが、任意の2色の比較やAA・AAAの自動判定には対応していません。ここで示したアイコンと背景の比率は別途計算しました。公開前にはアイコンの形・文字ラベル・キーボード操作を組み合わせて確認しましょう。