アクセシビリティ対応の第一歩は現状を知ることから
当社では、ウェブサイトの診断や改善方法のご提案を通じて、すべてのユーザーにとって使いやすいウェブづくりをサポートしています。ご相談・ご依頼は、こちらからお気軽にお問い合わせください。
お問い合わせテキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。
出典:WAIC. “
達成基準 1.4.3 を理解する
” WCAG 2.0 解説書(参照2024年6月1日)
視覚障害を持つユーザーがウェブコンテンツをより容易に読み取れるようにすることを目的としています。具体的には、テキストや文字画像とその背景の間に十分なコントラスト比を確保することが求められています。この基準に適合することで、視覚的な識別が容易になり、情報のアクセシビリティが向上します。
このページでは、ウェブサイト制作でよく直面する課題に対して、基本的で取り組みやすい方法を紹介しています。
ただし、他にも対処すべき状況や多くの手段があり、具体的な状況に応じて最適な方法を選ぶことが大切です。
ウェブページのデザイン時に、テキストと背景色のコントラスト比が少なくとも4.5:1であることを確認します。これを実現するために、オンラインのコントラスト比チェッカーを使用することが推奨されます。また、デザインツールには、コントラスト比をチェックする機能が組み込まれているものもありますので、それを活用してデザインの段階で確認することが重要です。
G18:テキスト(及び文字画像)とその背景の間に、少なくとも4.5:1のコントラスト比を確保するウェブページの設計において、特定の背景色や文字色を指定せず、ユーザーのデフォルト設定に依存するようにします。これにより、ユーザーが自身の視覚的なニーズに合わせて最適なコントラストを確保できます。例えば、CSSで色を明示的に指定しないことで、ユーザーがブラウザやオペレーティングシステムの設定に従って表示をカスタマイズできるようにします。
G148:背景色及び文字色を指定せず、その初期設定を変更するウェブコンテンツ技術の機能を使用しないウェブページにおいて、ユーザーがコントラストの高いテーマに切り替えられるようなオプションを提供します。これには、コントラスト比を調整できるスイッチやテーマ選択機能を実装することが含まれます。例えば、明るい背景に暗いテキストのテーマと、暗い背景に明るいテキストのテーマを用意し、ユーザーが簡単に切り替えられるようにします。
G174:利用者が十分なコントラストのある提示に切り替えられるように、十分なコントラスト比のあるコントロールを提供するウェブページのデザイン時に、テキストと背景色のコントラスト比が少なくとも3:1であることを確認します。これを実現するために、オンラインのコントラスト比チェッカーを使用することが推奨されます。また、デザインツールには、コントラスト比をチェックする機能が組み込まれているものもありますので、それを活用してデザインの段階で確認することが重要です。
G145:テキスト(及び文字画像)とその背景の間に、少なくとも3:1のコントラスト比を確保するウェブページの設計において、特定の背景色や文字色を指定せず、ユーザーのデフォルト設定に依存するようにします。これにより、ユーザーが自身の視覚的なニーズに合わせて最適なコントラストを確保できます。例えば、CSSで色を明示的に指定しないことで、ユーザーがブラウザやオペレーティングシステムの設定に従って表示をカスタマイズできるようにします。
G148:背景色及び文字色を指定せず、その初期設定を変更するウェブコンテンツ技術の機能を使用しないウェブページにおいて、ユーザーがコントラストの高いテーマに切り替えられるようなオプションを提供します。これには、コントラスト比を調整できるスイッチやテーマ選択機能を実装することが含まれます。例えば、明るい背景に暗いテキストのテーマと、暗い背景に明るいテキストのテーマを用意し、ユーザーが簡単に切り替えられるようにします。
G174:利用者が十分なコントラストのある提示に切り替えられるように、十分なコントラスト比のあるコントロールを提供する視覚障害を持つユーザーがウェブコンテンツを容易に読み取れるようにするための重要な基準です。コントラスト比を適切に確保することで、情報の視認性が向上し、アクセシビリティが向上します。実践的な方法として、テキストと背景のコントラスト比を4.5:1以上にする、ユーザーのデフォルト設定に依存する、コントラスト比を調整可能なコントロールを提供することが挙げられます。これらの方法を実施することで、より多くのユーザーがウェブコンテンツを利用しやすくなります。
本ページの内容は、「Web Content Accessibility Guidelines (WCAG) 2.0」、「WCAG 2.0 解説書
」および「WCAG 2.0 達成方法集
」からの引用を含んでいます。引用された内容は、W3CおよびWAICによって公開されており、以下のクリエイティブ・コモンズライセンスに基づいて使用されています。これらのガイドラインを参考にしつつ、ウェブアクセシビリティの向上に向けた具体的な取り組みを分かりやすく説明しています。
この作品はクリエイティブ・コモンズ 表示 4.0 国際ライセンスの下に提供されています。
この作品はWCAG 2.0 解説書及び達成方法集からの引用を含みます。翻訳はWAICによって提供されており、文書のステータスは「勧告」です。なお、この文書の正式版はあくまでW3Cのサイト内にある英語版であることにご注意ください。
当社では、ウェブサイトの診断や改善方法のご提案を通じて、すべてのユーザーにとって使いやすいウェブづくりをサポートしています。ご相談・ご依頼は、こちらからお気軽にお問い合わせください。
お問い合わせ