色のみで領域やグループを表現しない

UIデザイン

概要

この基準では、色のみで領域やグルーピングを表現していないことを確認してください。 強制カラーモードなどの支援技術で色をカスタムするユーザーや、色を識別しづらいユーザーは、色による情報を理解することが難しい場合があります。 領域やグルーピングを表現する際には、見出しやラベル、適切な余白など、色の情報に加えて他の視覚的な手がかりを提供することが重要です。

メリット

  1. 色を識別しづらいユーザーも、領域やグルーピングの情報を理解しやすくなります。
  2. 強制カラーモードなどの支援技術を使用してユーザーが色をカスタムしている状態でも情報を取得できるようになります。

達成方法

  1. 複数の視覚的手がかりの提供:
    • 領域やグルーピングを表現する際には、色の情報に加えて、見出しやラベル、適切な余白など、複数の視覚的な手がかりを提供します。
複数のcheckboxのうち一部の領域に背景色が設定されている
Do
色に加えて見出しでグループを表現している
複数のcheckboxのうち一部の領域には背景色と見出しが設定されている
Don't
色のみでグループを表現している

テスト方法

  1. 目視での確認:
    • ページ内の領域やグルーピングが、色以外の視覚的な手がかり(見出し、ラベル、余白など)を使用して表現されていることを確認します。
    • 判断に迷う場合は、強制カラーモードなどの支援技術を使用して色をカスタムした状態で情報が取得できるかを確認します。

参考