要約

背景色や背景画像を設定するときは、CSSを使って十分なコントラストを確保してください。

テクニック

• 前景のテキスト色と背景色の間に最低限のコントラストを確保してください。[[WCAG-1.4.3]]

• 前景のテキスト色と背景色の間のコントラストの強調を検討してください。[[WCAG-1.4.6]]

例

body {
   color: rgb(0,0,0);
   background-color: rgb(251,245,224);
}

解説

アクセシブルな読書に関するコントラストとは、前景のテキスト色とその背景色の輝度（放射される光の量）の差です。それぞれの相対的な輝度より、1:1（コントラストなし）から 21:1 （最も暗い黒と最も明るい白）までのコントラスト比が決定されます。

出版物を視力の弱いユーザーや色覚異常のユーザーでも読めるようにするには、前景のテキスト色と背景色あるいは背景画像の間に十分なコントラストを確保する必要があります。

WCAGレベルAAガイドラインを満たすための最小コントラストは4.5:1ですが、デフォルトサイズが18ポイント（太字の場合は14ポイント）以上のテキストの場合は3:1に引き下げられます。このコントラスト要件は、発行元やインプリントなどのロゴや、装飾画像に含まれるテキストには適用されません。

WCAG AAAを満たすには、最小コントラスト要件は7:1、大きなテキストの場合は4.5:1に、コントラスト比が大きくなります。このコントラストレベルを満たす必要はありませんが、達成されるコントラスト比が大きいほど、出版物を読める読者の数は増えます。

異なるリーディングシステムでは予期しない方法でコンテンツがリフローされる可能性があるため、ノイズの多い（多色の）背景画像の上にテキストを重ねて、配置に頼って色のコントラストの問題を避けないでください。

コントラスト比の計算は、ほとんどの場合、機械で簡単かつ正確に実行でき、次のような多数の無料アプリケーションが利用できます。

• Ace — Aceバリデーターを使って、コントラストの問題を含むさまざまなWCAG違反についてEPUB出版物をチェックできます。Aceは出版物全体をチェックできる唯一のツールです。
• Lighthouse — Lighthouseは、ChromeやEdgeなどのChromiumベースのブラウザに組み込まれている開発者ツールです。個々のHTMLページで、コントラストの問題などのアクセシビリティの問題をチェックできます。
• カラー コントラスト アナライザー（CCA） — CCAは、手動で入力した色間のコントラスト比をテストする便利なツールです。新しい組み合わせが規格に準拠しているかどうかを判断するために出版物全体を再チェックする必要がないため、コントラストの問題を解決するプロセスを迅速化できます。

これらのツールはCSSのカラー宣言の比較で問題がないかを調べるのに便利ですが、通常、背景画像に重なるテキスト（または、テキストを含む画像）に関する問題はチェックできません。リフロー可能な出版物では、サポートがしばしば不十分なため、一般的に背景画像を使用しないことが推奨されていますが、固定レイアウトの出版物ではテキストの背景が画像の場合がよくあります。

テキストが画像の上に配置されている場合、または画像の一部である場合は、コントラストを手動で検証する必要があります。

関連リンク

• CSS —前景色：'color'プロパティ
• CSS —背景