はじめに
みなさんは、コントラスト比を気にしながらUIを作成していますか？
コントラスト比を考慮して、カラーパレットを見直した話は、よく聞きます。
その話の中では、テキストコンテンツを基準にコントラスト比の話をしています。
ただ、WCAGの基準には非テキストコンテンツのコントラストに関する基準もあります。
そのため、この記事では、非テキストコンテンツのコントラストについて紹介します。
非テキストのコントラスト
意図・目的
低いコントラストの要素はロービジョン人に見逃される可能性があるため、アクティブなユーザインタフェースや意味のあるグラフィックが中程度のロービジョンの人によって識別できるようすることが必要。
また、コンテンツや機能を理解するためにグラフィックが必要とされる場合は、コントラストを強化する支援技術がなくてもロービジョンや他の障害のある人に知覚されるべきある。
コントラスト比の基準は、コントラスト (最低限)の大きな文字のものと同じ。
アクティブなユーザインタフェースについて
最低でも隣接している色と3:1のコントラスト比が必要
コンポーネントのコントロールを示す情報（フォーカス時のアウトライン）も 3:1のコントラスト比が必要。
コンポーネントの状態を示す場合は、変化前後のコントラスト比は、3:1である必要がない
hoverで色が変化したり、リンクの訪問済みなどの色の変化によって、コンポーネントの状態を示す場合はコントラスト比は、3:1である必要がない
border（境界）について
クリック範囲を示す視覚的なborderが存在することは求めないが、認知障害のある人が要素を認識し、動作を完了させるためには、コンポーネントにborderをつけることが推奨されている。
ボタンのテキストやInput要素のプレースホルダーが十分なコントラスト比が確保されている場合は、クリック範囲を表す視覚的な要素がなくても問題ない。
また、テキストボタンに色つきのborderが付いている場合、borderがボタンであることを示す唯一の手段ではないため、テキストのコントラスト(1.4.3 コントラスト (最低限))を越えるコントラストは必要ない。
隣接している色について
「隣接している色」は、コンポーネントに隣接している色を意味する。
例えば、以下のような 白い背景で濃いボーダーのインプット要素と白い外側の背景があった場合、コンポーネントの「隣接している色」は白い外側の背景になる。
コントラスト比を測定する際、コンポーネントの識別に干渉しない色は無視できる
例えば、ドロップシャドウやコントラストをもつ背景間の暗いボーダーは、明るさ (知覚される輝度) が最も近い色に含まれていると見なされる。
以下のような場合では、隣接している色（#2F3232）とborder（#000000）のコントラスト比は、1.62:1で基準を満たしていないが、コンポーネントの識別には、テキストフィールドの背景（'#FFFFFF'）を使っているため、border（#000000）を無視し、隣接している色（#2F3232）とテキストフィールドの背景（'#FFFFFF'）でコントラスト比を測定するf
色の使用との関係性
色の使用では、テキストやグラフィックを区別するためにコントラスト比 (明るさの差) は使用できるが、区別するための唯一の方法になってはいけないが、3:1 のコントラスト比を満たしていれば問題ない
例えば、以下のようにテキストの中からリンクである要素を示すために、周囲のテキストとのコントラスト比3:1を使用して、区別させることはできる。
色相の違いのみを使用した非テキスト情報は、色の使用の基準に失敗する可能性があるので、注意が必要
フォーカスの可視化との関係性
コンポーネントがフォーカスされている時に、そのコンポーネントの視覚的なフォーカスインジケータは、隣接している背景に対して十分なコントラストがなければならない。
※ ただし、コンポーネントの見た目がユーザエージェントに決定されて、かつコンテンツ制作者が変更してない場合を除く。
ほとんどのフォーカスインジケータはコンポーネントの外側に表示されるため、コンポーネントの背景とコントラストをつける必要がある。
その他のケースとしては、以下のようなフォーカスインジケータがある
- コンポーネントの内側にフォーカスインジケータがある場合
- コンポーネント内の隣接している色とコントラストをつける必要がある
- コンポーネントのボーダーにフォーカスインジケータがある場合
- コンポーネントが置かれている背景とフォーカスインジケータの色をコントラスト比をつける必要がある
アクティブではないユーザインタフェースについて
インタラクションに利用できないユーザインタフェースはコントラストの基準を満たすことを求められていない。
ただ、アクティブでないユーザーインターフェースを識別できるようにすることは、一部の人にとって有益であるため、将来的に、利用者の設定に応じて無効化されたことを提示する方法が発展することが期待されている
まとめ
この記事では、非テキストコンテンツのコントラストについてをまとめてみました。
ぜひこの記事を読んで、非テキストコンテンツのコントラストについても考えてみてください。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。