スマホの小さなアイコンは何色がいい？見つけやすくするUIカラー
スマホのイベント一覧では、検索・絞り込み・保存などの小さなアイコンが並びます。淡い色で控えめにすると背景に埋もれ、すべてを目立つ色にすると重要な操作が分かりにくくなります。UI（ユーザーが操作する画面や部品）のアイコンは、好みの色を先に選ぶより、背景との明るさの差と、通常時・選択時の役割を決めることが大切です。
小さなアイコンは背景とのコントラストで決める
WCAG（WEBコンテンツのアクセシビリティ指針）2.2では、操作部品や状態の識別に必要な視覚情報、意味を理解するために必要な図形には、隣接色とのコントラスト比が原則3:1以上求められます。コントラスト比は、隣り合う色の相対的な明るさの違いを数値にしたものです。単なる飾りや、同等の情報が文字で伝わる図形まで、すべて一律の対象ではありません。
小さいアイコンは線が細いほど輪郭が消えやすいため、数値が基準以上でも形を識別できるか確認します。検索の虫眼鏡、絞り込みの線、保存のハートなどは、操作の意味が伝わる形を使い、必要に応じて文字を添えましょう。文字ラベルには別の基準があり、通常サイズでは背景と原則4.5:1以上を確認します。
イベント一覧の検索・保存・詳細ボタンを色分けする例
イベントを探して保存するスマホ画面を想定します。HEX（ヘックス）は、WEBで色を指定する16進数のカラーコードです。次の比率は、各アイコンや文字と実際に接する背景色を組み合わせて計算した値です。
- 画面とカード：ページ背景をオフホワイト#F6F8FB、検索欄とイベントカードを白#FFFFFFにします。両色の比は約1.06:1なので、カードの区切りを色差だけに任せず、余白や枠線も使います。
- 検索・絞り込みアイコン：白#FFFFFFの操作欄に青みのある濃いグレー#41566Eを使うと約7.55:1です。「検索」「絞り込み」の文字は濃い青灰#24344Aで約12.61:1。どちらも同じ操作グループとしてそろえます。
- 未選択の保存アイコン：白#FFFFFFのカード上では落ち着いた青灰#66768Bの輪郭ハートが約4.64:1です。未選択でも押せる操作なので、無効状態のように極端に薄くしません。
- 保存済みの状態：淡いブルー#E8F2FAの小さな面に濃いブルー#195C94の塗りハートを置くと約6.17:1です。「保存済み」と文字でも示します。面と周囲の白#FFFFFFは差が小さいため、青灰#788AA0の枠を付ければ、枠と白は約3.53:1、枠と淡いブルーは約3.12:1です。
- 詳細を見るボタン：濃いブルー#1F4F80の面に白#FFFFFFの矢印と「詳細を見る」を置くと約8.44:1です。カード上でもボタンの場所が分かり、矢印だけより操作内容が明確になります。
この例では、一般的な操作を青灰、選択済みを濃いブルーと形の変化、次に進む操作を塗りボタンに分けています。色数を増やさず、状態と重要度の違いを示す構成です。
輪郭線・ラベル・背景の変化まで確認する
淡い青灰#B6C2CFは白#FFFFFFとの比が約1.81:1です。意味のない装飾なら使えますが、検索や保存の操作を示す唯一のアイコンには使いません。また、青灰#66768Bは白#FFFFFF上では通常サイズの文字にも使える比率ですが、淡いブルー#E8F2FA上では約4.09:1に下がります。背景を変えたら文字と図形を別々に再確認してください。
小さなアイコンを細い線だけにせず、実際のスマホ幅で輪郭が分かる太さに調整します。アイコンの見た目の大きさとタップできる範囲は別なので、指で操作しやすい余裕も確保します。色だけで「保存済み」を伝えず、塗り方とラベルを併用することも重要です。
HueRollでは候補色をHEXで調整し、選択した色と白・黒のコントラストを確認できます。ただし任意の2色同士の比較や、WCAGのAA・AAA自動判定はできません。今回のような淡い面とアイコンの組み合わせは別途計算し、最終的に画面上で見分けられるか確かめましょう。