要素は強化された色のコントラスト比のしきい値を満たす必要があります

ルールID: color-contrast-enhanced
ルールセット: axe-core 4.10
ユーザーへの影響:
ガイドライン: WCAG 2.1 (AAA), WCAG 2.0 (AAA)

Start building more accessible experiences

Axe DevTools Pro helps dev teams find and fix up to 80% of accessibility issues while coding. No experience required. Get started with your free trial today.

Compliance Data & Impact

User Impact


Minor
Critical

Disabilities Affected

  • 視力低下

Standard(s)

  • WCAG 2.1 (AAA)
  • WCAG 2.0 (AAA)

WCAG 達成基準 [WCAG 2.1 (AAA)]

  • 1.4.6: Contrast (Enhanced)

WCAG 達成基準 [WCAG 2.0 (AAA)]

  • 1.4.6: Contrast (Enhanced)

修正方法

すべてのテキスト要素において、前景のテキストとその背後の背景色の間に十分な色のコントラストがあることを確認します。

成功基準: テキストが画像の一部である場合でも、小さいテキストの場合は少なくとも7:1、大きいテキストの場合は4.5:1の色のコントラストを確保します。要件では、大きなテキストは18pt (24 CSSピクセル) または14pt太字 (19 CSSピクセル) と定義されています。注: 1:1の比率が見つかった要素は "不完全" とみなされ、手動での確認が必要になります。

以下のカラーコントラスト アナライザーを使用して、ガイドラインに適合する色を見つけます。

Image

色コントラスト分析ツール: 以下は、ガイドラインに照らして色のコントラスト比を分析するツールへのリンクです。

  • axe DevToolsブラウザ拡張機能 — Dequeのエンタープライズ製品であるaxe DevTools HTMLを使用すると、開発グループはアクセシビリティ テストを既存の自動テスト プロセスに統合することができ、顧客はこれをDequeの axe Monitor アクセシビリティ監視およびレポート製品と組み合わせて使用します。Axe DevToolsには、多くのプログラミング言語に統合するためのコード ライブラリの提供に加えて、Google ChromeおよびMozilla Firefox用のWebアクセシビリティ分析拡張機能も含まれており、企業のフロントエンド開発者はいつでも簡単にアクセシビリティ テストを実行できます。分析ツールは、アクセシビリティ違反に関する詳細情報と、より詳細な知識へのリンクを含む問題を修正するための手順を返します。
  • axe-core — axeアクセシビリティ エンジンは、高速で、誤検知エラーや重複結果を返さず、GitHubリポジトリ、ブラウザー プラグイン、またはフレームワーク統合として利用できるオープンソースのJavaScriptアクセシビリティ ルール ライブラリです。

なぜ重要なのか

視力の弱い人の中には、コントラストが低い、つまり明るい部分や暗い部分があまりないと感じる人もいます。すべてがほぼ同じ明るさで表示される傾向があるため、輪郭、境界線、エッジ、詳細を区別するのが難しくなります。背景の輝度(明るさ)に近すぎるテキストは読みにくくなることがあります。

ロービジョンの人は、全盲の人の約3倍もいます。12人に1人は、平均的な色の全スペクトルを見ることができません。米国では男性の約8%、女性の約0.4%にあたります。視力が低下したり、色覚異常のある人は、十分なコントラストがないと背景に対してテキストを区別することができません。

背景では色の透明度と不透明度が考慮されます。

前景の色の透明度と不透明度は、次の理由により検出および考慮するのがより困難です。

  • 前景と背景の色が1:1です。
  • CSS背景グラデーション。
  • CSS疑似要素の背景色。
  • CSSボーダーを使用して作成された背景色。
  • 前景の別の要素と重なる - この場合、配置が難しくなることがあります。
  • CSSによってビューポート外に移動された要素。

ルールの説明

すべてのテキスト要素は、WCAG 2 AAAコントラスト比しきい値に従って、前景のテキストとその背後の背景色の間に十分なコントラストを持つ必要があります。

仕組みについて (簡単に言うと)

すべてのテキスト要素をチェックして、前景テキストと背景色のコントラストがWCAG 2 AAAコントラスト比のしきい値を満たしていることを確認します。

注意:

このルールは、 background-image を持つテキスト要素、他の要素によって隠されているテキスト要素、またはテキストの画像であるテキスト要素については報告しません。

これにより、無効なボタンの子要素もチェックされ、誤った値を回避するために無視できるようになります。

リソース

axe 4.10 ルールの一覧 を参照する

この情報は役に立ちましたか?

すでにフィードバックをいただきました、ありがとうございます。.

あなたの回答は次のとおりです。

この情報は役に立ちましたか?
フィードバックが提出された日付/時刻: