カードUIの背景色はどう選ぶ？情報を見やすく整理する配色

WEBサイトの講座一覧や商品一覧では、関連する情報をひとまとまりに見せる「カードUI」をよく使います。UIとはユーザーインターフェース、つまり画面上で情報を見たり操作したりするための部品です。カードの背景を鮮やかにすれば目立ちますが、何枚も並ぶと文字・日時・申込み状況を探しにくくなることがあります。大切なのはカードだけを目立たせることではなく、カードの外側・内側・状態表示を役割で分けることです。ここでは公民館の手芸講座一覧を例に考えます。

まず一覧の背景とカード本体を決め、細かな情報を分ける

最初に、講座名・開催日・対象年齢・空き状況・申込み方法など、各カードに繰り返し載せる情報を並べます。カードの広い背景は白や淡い中立色に統一し、文字を読む面として使うと、何枚並んでも同じ順序で比較しやすくなります。日時や会場のような補足情報はカード内の小さな淡色面でまとめ、受付状態は短い文字ラベルで示します。情報ごとにカード全体を違う色で塗る必要はありません。

カードの背景色とページ背景色が近くても、必ずしも問題ではありません。カードの見出し、余白、枠線でまとまりを作れるからです。ただし、カードを選択した状態が操作上重要なら、背景色の変化だけに頼らず、チェック表示や「選択中」の文言、十分に見える輪郭を付けます。

コントラスト比とは隣り合う色の相対的な明るさの差です。WCAG 2.2（Web Content Accessibility Guidelines、WEBアクセシビリティの指針）のレベルAAでは、通常サイズの文字は背景と原則4.5:1以上、大きな文字は3:1以上が必要です。操作を識別するのに欠かせない非テキストの輪郭や状態表示には、隣接色と原則3:1以上が求められます。一方、装飾的なカード枠線すべてに一律3:1を要求するものではありません。

公民館の手芸講座一覧を見やすくする背景色の具体例

刺しゅう、布小物、編み物などの講座を一覧にし、日付や空席数を比べて詳細を開くページを想定します。HEXはWEB上の色を16進数で指定するコードです。カード本体は共通の明るい色にして、補足・受付状態・選択状態を内側の小さな面で整理します。

• 一覧ページの背景：広い面には温かみのあるオフホワイト■#F7F5F0を使い、説明文をチャコール■#293840にします。文字と背景の比率は約11.12:1です。ページの見出しを深い青■#27586Aにすると約7.16:1になります。
• 通常の講座カード：背景を白■#FFFFFF、講座説明の文字をチャコール■#293840に統一すると約12.11:1です。カードの白■#FFFFFFとページ背景■#F7F5F0の差は約1.09:1です。区切りが必要なら、薄い線■#E2E6E4では白との比率が約1.26:1なので、グレー青■#74828Aの枠線も候補です。後者は白■#FFFFFFと約3.96:1です。枠線だけに頼らずカード間に余白を設けます。
• 講座名と日時の強弱：白■#FFFFFFのカード上で、講座名は深い青■#27586Aにすると約7.81:1です。対象年齢などの補足文字はグレー青■#52636Bを使えば約6.26:1です。文字の大きさや配置でも講座名と補足を区別します。
• 日時・会場をまとめるカード内の面：淡い青灰■#EDF2F1にチャコール■#293840で日付・会場名を記載すると約10.71:1です。白いカード■#FFFFFFとこの淡色面■#EDF2F1の差は約1.13:1なので、「日時・会場」の小見出しと余白を付け、背景色だけに区切りを任せません。
• 申込み受付中の表示：カードの端に淡い緑■#DEEEE6の小さなラベルを置き、濃い緑■#28584Aで「受付中」と書くと約6.76:1です。ラベルと白■#FFFFFFのカード背景の差は約1.20:1なので、色だけではなく文字そのもので状況を伝えます。
• 定員に達した講座：淡い赤茶■#F3E7E2のラベルに濃い茶■#70483Cで「満席」と書くと約6.47:1です。白いカード■#FFFFFFとラベル面■#F3E7E2の差は約1.21:1ですが、文字で受付状態を区別できます。満席のカード全体を薄くして講座名まで読みにくくする必要はありません。
• 比較対象として選んだカード：利用者が比較用のチェックを入れたカードだけ背景を淡い青緑■#E8F1EFにし、濃い青■#2E6370で輪郭を示します。面とページ背景■#F7F5F0の差は約1.06:1と小さいものの、輪郭と選択面■#E8F1EFは約5.82:1です。文字色■#293840と選択面の比率も約10.53:1です。チェック欄と「比較に追加済み」の文言を併用します。
• 講座詳細へ進むボタン：カード内の「詳細・申込みを見る」は深い青緑■#245F72の背景に白■#FFFFFFで文字を表示します。文字とボタンは約7.11:1、ボタンと白■#FFFFFFのカード背景も約7.11:1です。選択されたカードの淡い青緑■#E8F1EFの上でも、ボタン面との差は約6.18:1あります。
• 材料費などの補足案内：「材料費は当日支払い」のような条件は、カード内の淡い砂色■#F6ECD8と濃い茶■#5B4735で表示すると約7.47:1です。砂色■#F6ECD8と白いカード■#FFFFFFの差は約1.17:1なので、「費用について」と文字で見出しを付けます。
• 暗いカードを使いたい場合：濃い青灰■#315464に白■#FFFFFFの文字なら約8.13:1の比率はあります。ただし、すべてのカードをこの暗色で埋めると、講座ごとの差を探す一覧では濃い面が広く続きます。文字のコントラストが十分でも、通常カードの背景に暗色を使う必要があるかを内容から判断します。

通常のカードは同じ白い背景にそろえ、日時のまとまり、空き状況、比較中の状態を必要な範囲だけ別の面にしました。カードの色数を増やすより、講座名から申込みまでの読む順番を共通にする方法です。

背景色を変えたカードでも、情報と操作を見失わないようにする

スマートフォンではカードが縦に並ぶため、日時や会場のラベルが省略されないか、状態表示と申込みボタンが混同されないか確認します。比較用のチェック欄と講座詳細のボタンは別々の操作として用意し、カード全体をクリック可能なリンクにした中へ別のボタンを重ねる構造は避けます。チェックした状態は画面表示だけでなく、実際の選択操作にも反映させます。

淡いカード内の区切り線や色付きラベルは、周囲と3:1未満でも自動的に不適合とは限りません。装飾なのか、状態や操作を見分けるために欠かせない形なのかで確認対象が変わります。大切な表示は色だけで示さず、必要な枠線・文字・形のコントラストをそれぞれ確かめましょう。

HueRollでは選択した色と白・黒とのコントラストを確認できますが、任意の2色の比較やAA・AAAの自動判定には対応していません。ここで示した任意の色同士の比率は別途計算しています。