G18：テキスト（及び文字画像）とその背景の間に、少なくとも4.5:1のコントラスト比を確保する
出典：WAIC. “
G18: テキスト (及び文字画像) とその背景の間に、少なくとも 4.5:1 のコントラスト比を確保する
” WCAG 2.0 達成方法集（参照2024年7月1日）
概要
視覚に障害を持つユーザーがウェブコンテンツを読みやすくするために、テキストと背景色の間に十分なコントラスト比を確保することを推奨しています。コントラスト比4.5:1は、通常のテキストが視覚的に明確に識別できる最小限の比率です。
このページでは、ウェブサイト制作でよく直面する課題に対して、基本的で取り組みやすい方法を紹介しています。
ただし、他にも対処すべき状況や多くの手段があり、具体的な状況に応じて最適な方法を選ぶことが大切です。
適用（対象）
こちらは、次の達成基準に関連する達成方法です。
コントラスト比の重要性
コントラスト比が低い場合、視覚障害を持つユーザーや、特定の照明条件下で画面を見るユーザーにとって、テキストの読みやすさが著しく低下します。適切なコントラスト比を確保することで、これらのユーザーがウェブコンテンツにアクセスしやすくなります。
実践的な方法
ツールの利用
コントラスト比の確認には多くのオンラインツールが無料で提供されており、簡単にテキストと背景色のコントラスト比を計算できます。以下のツールがおすすめです。
また、PhotoshopやSketchなどのデザインツールには、コントラスト比をチェックする機能が組み込まれており、デザインプロセスの中で直接コントラスト比を確認することが可能です。
デザインの段階で確認
デザインプロセスの早い段階でコントラスト比を確認し、必要な調整を行うことが重要です。
色の選択に注意
明るい色と暗い色の組み合わせを選び、テキストが背景から明確に区別されるようにします。
例えば、黒いテキストと白い背景の組み合わせは高いコントラスト比を持ちます。
具体例
良い例
テキストカラー: #000000（黒）
背景カラー: #FFFFFF（白）
コントラスト比: 21:1
この組み合わせは、コントラスト比が非常に高く、すべてのユーザーにとって読みやすいです。
悪い例
テキストカラー: #808080（グレー）
背景カラー: #C0C0C0（ライトグレー）
コントラスト比: 1.5:1
この組み合わせは、コントラスト比が低く、視覚障害を持つユーザーにとって読みづらいです。
まとめ
G18は、ウェブコンテンツのアクセシビリティを向上させるために重要なガイドラインです。適切なコントラスト比を確保することで、すべてのユーザーがコンテンツにアクセスしやすくなります。オンラインツールやデザインツールを活用し、デザインの段階でコントラスト比を確認することが推奨されます。
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のサイト内にある英語版であることにご注意ください。