Build more accessible websites with axe DevTools Pro
Compliance Data & Impact
修正方法
すべてのテキスト要素の前景テキストと後ろの背景色の間に十分なコントラストがあることを確認します。
達成基準: テキストが画像の一部であっても、小さいテキストには少なくとも 7:1、もしくは大きいテキストには 4.5:1 のコントラスト比があることを確認します。大きいテキストは必須要件により 18pt もしくは 14pt の太字と定められています。注記: 1:1 という比率の要素は「不十分」と見なされ、目視による確認が必要です。【訳注：日本語の全角文字の場合、22pt 又は 18pt の太字を「大きいテキスト」とみなすのが妥当です。】
以下のカラーコントラストアナライザーを用いて、ガイドラインに合格する色を見つけます。
カラーコントラスト分析ツール: 以下はカラーコントラスト比をガイドラインに対して分析するツールのリンクです:
- axe DevTools ブラウザー拡張機能 — Deque のエンタープライズ製品である axe DevTools HTML は、開発グループがアクセシビリティ検証を既存の自動テストプロセスに組み込むことを可能にし、Deque の axe Monitor アクセシビリティモニタリングおよびレポーティングツールと共にお客様に使用されています。多くのプログラミング言語で組み込むためのコードライブラリーを提供することに加え、axe DevTools は Google Chrome と Mozilla Firefox 向けのウェブアクセシビリティ分析拡張機能も備えており、企業のフロントエンド開発者がいつでもアクセシビリティ検証をすばやく実施できるようにしています。分析ツールはより詳細な知識を提供するリンクを含む、アクセシビリティの問題と問題を修正するための説明に関する詳細を返します。
- axe-core — axe accessibility engine は高速で、誤検知エラーや重複する結果を返さず、GitHub リポジトリ、ブラウザープラグイン、あるいはフレームワークとして利用可能なオープンソースの JavaScript アクセシビリティルールライブラリーです。
なぜ重要なのか
一部のロービジョンの人の中には、コントラストの低さを感じる人もいます。つまり、明るい部分や暗い部分があまり多くありません。すべてが同じ程度の明るさに見える傾向があり、アウトライン、ボーダー、縁、細部を区別することが難しくなります。背景と輝度 (明るさ) が似ているテキストは読むのが難しくなります。
ロービジョンの人は、全盲の人に比べて、3倍近くいます。12人中1人 (アメリカでは男性の約8%、女性の約0.4%) は平均的な全領域の色を見ることができません。ロービジョンや色覚異常の人は十分なコントラストがない場合、テキストと背景を区別することができません。
背景では、色の透明度と不透明度が考慮されます。
前景での色の透明度と不透明度は次の理由により検知するのがより難しく、考慮しづらくなります:
- 前景と背景が 1:1 の色
- CSS 背景グラデーション
- CSS 疑似要素の背景色
- CSS ボーダーにより作成された背景色
- 他の要素による前景の重なり - 難しいポジショニングにより時に起こります
- CSS により要素がビューポート外に移動
ルールの説明
すべてのテキスト要素には、WCAG 2 AAA のコントラスト比のしきい値に従って、テキストとその後ろにある背景色の間に十分なコントラストがなければなりません。
仕組みについて (簡単に言うと)
すべてのテキスト要素を確認し、前景テキストと背景色の間のコントラストが WCAG 2 AAA コントラスト比のしきい値を満たしていることを確認します。
注記:
このルールは background-image を持つテキスト要素、他の要素によって隠されているテキスト要素、もしくは文字画像については報告しません。
これは無効になっているボタンの子要素も確認し、誤った値を避けるために無視することができます。
リソース
Deque University コースのページ (要登録)
関連するコース情報はありません。
axe 4.7 ルールの一覧 を参照する
Was this information helpful?
Your response was as follows:
Date/Time feedback was submitted: