アクセシビリティ対応の第一歩は現状を知ることから
当社では、ウェブサイトの診断や改善方法のご提案を通じて、すべてのユーザーにとって使いやすいウェブづくりをサポートしています。ご相談・ご依頼は、こちらからお気軽にお問い合わせください。
お問い合わせ出典:WAIC. “
G145: テキスト (及び文字画像) とその背景の間に、少なくとも 3:1 のコントラスト比を確保する
” WCAG 2.0 達成方法集(参照2024年7月1日)
G145は、特に大きなテキスト(22pt以上)や太字のテキスト(18pt以上)に対して、背景とのコントラスト比が少なくとも3:1であることを求めています。これは、視覚障害を持つユーザーがコンテンツを読みやすくするために重要です。小さなテキストに対しては、より高いコントラスト比(4.5:1以上)が求められるため、G18が適用されます。
このページでは、ウェブサイト制作でよく直面する課題に対して、基本的で取り組みやすい方法を紹介しています。
ただし、他にも対処すべき状況や多くの手段があり、具体的な状況に応じて最適な方法を選ぶことが大切です。
こちらは、次の達成基準に関連する達成方法です。
コントラスト比が低い場合、視覚障害を持つユーザーや、特定の照明条件下で画面を見るユーザーにとって、テキストの読みやすさが著しく低下します。適切なコントラスト比を確保することで、これらのユーザーがウェブコンテンツにアクセスしやすくなります。
コントラスト比の確認には多くのオンラインツールが無料で提供されており、簡単にテキストと背景色のコントラスト比を計算できます。以下のツールがおすすめです。
また、PhotoshopやSketchなどのデザインツールには、コントラスト比をチェックする機能が組み込まれており、デザインプロセスの中で直接コントラスト比を確認することが可能です。
デザインプロセスの早い段階でコントラスト比を確認し、必要な調整を行うことが重要です。
明るい色と暗い色の組み合わせを選び、テキストが背景から明確に区別されるようにします。
例えば、黒いテキストと白い背景の組み合わせは高いコントラスト比を持ちます。
背景色がライトグレー(#D3D3D3)で、テキスト色がダークグレー(#2F4F4F)の場合、コントラスト比は約4:1であり、視認性を向上させるために十分です。
背景色がライトグレー(#D3D3D3)で、テキスト色がライトブルー(#ADD8E6)の場合、コントラスト比は1.5:1しかなく、視覚障害を持つユーザーにとっては読みづらいです。このような色の組み合わせは避けるべきです。
G145は、特に大きなテキストや太字のテキストに対して、少なくとも3:1のコントラスト比を確保するためのガイドラインです。適切な色の選択やコントラスト比チェッカーを使用することで、視覚障害を持つユーザーがコンテンツを読みやすくなります。これにより、ウェブアクセシビリティが向上し、すべてのユーザーにとって快適なウェブ体験が提供されます。
本ページの内容は、「Web Content Accessibility Guidelines (WCAG) 2.0」、「WCAG 2.0 解説書
」および「WCAG 2.0 達成方法集
」からの引用を含んでいます。引用された内容は、W3CおよびWAICによって公開されており、以下のクリエイティブ・コモンズライセンスに基づいて使用されています。これらのガイドラインを参考にしつつ、ウェブアクセシビリティの向上に向けた具体的な取り組みを分かりやすく説明しています。
この作品はクリエイティブ・コモンズ 表示 4.0 国際ライセンスの下に提供されています。
この作品はWCAG 2.0 解説書及び達成方法集からの引用を含みます。翻訳はWAICによって提供されており、文書のステータスは「勧告」です。なお、この文書の正式版はあくまでW3Cのサイト内にある英語版であることにご注意ください。
当社では、ウェブサイトの診断や改善方法のご提案を通じて、すべてのユーザーにとって使いやすいウェブづくりをサポートしています。ご相談・ご依頼は、こちらからお気軽にお問い合わせください。
お問い合わせ