G174:利用者が十分なコントラストのある提示に切り替えられるように、十分なコントラスト比のあるコントロールを提供する
出典:WAIC. “
G174: 利用者が十分なコントラストのある提示に切り替えられるように、十分なコントラスト比のあるコントロールを提供する
” WCAG 2.0 達成方法集(参照2024年7月1日)
概要
G174は、ユーザーが十分なコントラストのある提示に切り替えられるように、ウェブコンテンツ内で十分なコントラスト比のあるコントロールを提供することを推奨しています。これにより、視覚に障害を持つユーザーや高齢者など、特定の視覚的なニーズを持つユーザーがコンテンツを視認しやすくなります。
このページでは、ウェブサイト制作でよく直面する課題に対して、基本的で取り組みやすい方法を紹介しています。
ただし、他にも対処すべき状況や多くの手段があり、具体的な状況に応じて最適な方法を選ぶことが大切です。
適用(対象)
こちらは、次の達成基準に関連する達成方法です。
実践的な方法
高コントラストリンクの提供
ページ内の低コントラスト要素に対応するため、ページ上部に高コントラスト版へのリンクを設置します。これにより、ユーザーは視認性の高いページに簡単に移動できます。
高コントラストモードの切り替え
ページに陰影のある背景や低コントラストの要素がある場合、ページのトップに高コントラストモードを切り替えるボタンを設置します。ユーザーがこのボタンをクリックすると、背景色やテキスト色が変更され、視認性が向上します。
具体例
高コントラストリンクの提供
ウェブページの上部に「高コントラストバージョン」のリンクを設置します。このリンクをクリックすると、コントラスト比4.5:1以上の高コントラストバージョンのページに移動します。このバージョンでは、すべてのテキストと画像が視認性を高めるために最適化されています。例えば、黒いテキストと白い背景の組み合わせが使用され、ユーザーが情報を読み取りやすくなります。
高コントラストモードの切り替え
ウェブページに陰影のある背景が使用されている場合、背景とテキストのコントラスト比が4:1しかないことがあります。ページのトップに「高コントラストモード」のボタンを設置し、ユーザーがこのボタンをクリックすると、背景色が変更され、テキストのコントラスト比が7:1になるように表示が切り替わります。例えば、もともと灰色の背景に灰色のテキストが使用されていた場合、このモードを有効にすると、背景が黒に変更され、テキストが白になることで、視認性が大幅に向上します。
悪い例
ウェブページのデザインが固定された低コントラストの配色を使用している場合。例えば、背景色が薄い灰色、テキストが濃い灰色の場合、視覚障害を持つユーザーには読みづらくなります。このような場合、ユーザーが自身のブラウザ設定を変更しても、ウェブページのコントラストが向上しないため、アクセシビリティが大きく損なわれます。
まとめ
G174は、ユーザーが視認性の高いコントラスト設定に切り替えられるようにするための重要な方法です。高コントラストリンクやモード切り替えボタンを提供することで、すべてのユーザーがウェブコンテンツを視認しやすくなります。これにより、ウェブアクセシビリティが向上し、包括的なユーザー体験が実現されます。
WCAG 2.0とその翻訳文書の利用について
本ページの内容は、「Web Content Accessibility Guidelines (WCAG) 2.0」、「WCAG 2.0 解説書
」および「WCAG 2.0 達成方法集
」からの引用を含んでいます。引用された内容は、W3CおよびWAICによって公開されており、以下のクリエイティブ・コモンズライセンスに基づいて使用されています。これらのガイドラインを参考にしつつ、ウェブアクセシビリティの向上に向けた具体的な取り組みを分かりやすく説明しています。
WCAG 2.0
この作品はクリエイティブ・コモンズ 表示 4.0 国際ライセンスの下に提供されています。
WCAG 2.0 解説書及び達成方法集
この作品はWCAG 2.0 解説書及び達成方法集からの引用を含みます。翻訳はWAICによって提供されており、文書のステータスは「勧告」です。なお、この文書の正式版はあくまでW3Cのサイト内にある英語版であることにご注意ください。