このページの本文へ移動

ウェブアクセシビリティガイドライン

1.4.3 コントラスト(最低限)(レベルAA)

テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。

出典:WAIC. “ 達成基準 1.4.3 を理解する新しいウィンドウを開きます ” WCAG 2.0 解説書(参照2024年6月1日)

概要

視覚障害を持つユーザーがウェブコンテンツをより容易に読み取れるようにすることを目的としています。具体的には、テキストや文字画像とその背景の間に十分なコントラスト比を確保することが求められています。この基準に適合することで、視覚的な識別が容易になり、情報のアクセシビリティが向上します。

このページでは、ウェブサイト制作でよく直面する課題に対して、基本的で取り組みやすい方法を紹介しています。
ただし、他にも対処すべき状況や多くの手段があり、具体的な状況に応じて最適な方法を選ぶことが大切です。

課題に対する実践的な方法

状況A:太字でないテキストが18ポイント(日本語は22ポイント)未満、太字のテキストが14ポイント(日本語は18ポイント)未満の場合

コントラスト比4.5:1の確保(G18)

ウェブページのデザイン時に、テキストと背景色のコントラスト比が少なくとも4.5:1であることを確認します。これを実現するために、オンラインのコントラスト比チェッカーを使用することが推奨されます。また、デザインツールには、コントラスト比をチェックする機能が組み込まれているものもありますので、それを活用してデザインの段階で確認することが重要です。

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

背景色と文字色の初期設定(G148)

ウェブページの設計において、特定の背景色や文字色を指定せず、ユーザーのデフォルト設定に依存するようにします。これにより、ユーザーが自身の視覚的なニーズに合わせて最適なコントラストを確保できます。例えば、CSSで色を明示的に指定しないことで、ユーザーがブラウザやオペレーティングシステムの設定に従って表示をカスタマイズできるようにします。

G148:背景色及び文字色を指定せず、その初期設定を変更するウェブコンテンツ技術の機能を使用しない

コントラスト比のあるコントロールの提供(G174)

ウェブページにおいて、ユーザーがコントラストの高いテーマに切り替えられるようなオプションを提供します。これには、コントラスト比を調整できるスイッチやテーマ選択機能を実装することが含まれます。例えば、明るい背景に暗いテキストのテーマと、暗い背景に明るいテキストのテーマを用意し、ユーザーが簡単に切り替えられるようにします。

G174:利用者が十分なコントラストのある提示に切り替えられるように、十分なコントラスト比のあるコントロールを提供する

状況B:太字でないテキストが少なくとも18ポイント(日本語は22ポイント)以上、太字のテキストが少なくとも14ポイント(日本語は18ポイント)以上の場合

コントラスト比 3:1 の確保(G145)

ウェブページのデザイン時に、テキストと背景色のコントラスト比が少なくとも3:1であることを確認します。これを実現するために、オンラインのコントラスト比チェッカーを使用することが推奨されます。また、デザインツールには、コントラスト比をチェックする機能が組み込まれているものもありますので、それを活用してデザインの段階で確認することが重要です。

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

背景色と文字色の初期設定(G148)

ウェブページの設計において、特定の背景色や文字色を指定せず、ユーザーのデフォルト設定に依存するようにします。これにより、ユーザーが自身の視覚的なニーズに合わせて最適なコントラストを確保できます。例えば、CSSで色を明示的に指定しないことで、ユーザーがブラウザやオペレーティングシステムの設定に従って表示をカスタマイズできるようにします。

G148:背景色及び文字色を指定せず、その初期設定を変更するウェブコンテンツ技術の機能を使用しない

コントラスト比のあるコントロールの提供(G174)

ウェブページにおいて、ユーザーがコントラストの高いテーマに切り替えられるようなオプションを提供します。これには、コントラスト比を調整できるスイッチやテーマ選択機能を実装することが含まれます。例えば、明るい背景に暗いテキストのテーマと、暗い背景に明るいテキストのテーマを用意し、ユーザーが簡単に切り替えられるようにします。

G174:利用者が十分なコントラストのある提示に切り替えられるように、十分なコントラスト比のあるコントロールを提供する

まとめ

視覚障害を持つユーザーがウェブコンテンツを容易に読み取れるようにするための重要な基準です。コントラスト比を適切に確保することで、情報の視認性が向上し、アクセシビリティが向上します。実践的な方法として、テキストと背景のコントラスト比を4.5: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のサイト内にある英語版であることにご注意ください。

お問い合わせ

アクセシビリティ対応の第一歩は現状を知ることから

当社では、ウェブサイトの診断や改善方法のご提案を通じて、すべてのユーザーにとって使いやすいウェブづくりをサポートしています。ご相談・ご依頼は、こちらからお気軽にお問い合わせください。

お問い合わせ