このページの本文へ移動

G145:テキスト(及び文字画像)とその背景の間に、少なくとも3:1のコントラスト比を確保する

出典: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のコントラスト比を確保するためのガイドラインです。適切な色の選択やコントラスト比チェッカーを使用することで、視覚障害を持つユーザーがコンテンツを読みやすくなります。これにより、ウェブアクセシビリティが向上し、すべてのユーザーにとって快適なウェブ体験が提供されます。

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のサイト内にある英語版であることにご注意ください。

Contactお問い合わせ

当社ではウェブアクセシビリティ診断を提供しております。すべてのユーザーにアクセスできるウェブサイトを目指して、一緒に取り組みましょう。診断のご依頼や詳細については、お気軽にご連絡ください。

お問い合わせ