日本語
サイトメニュー

contrast-computable

レンダリングされたテキストの色のコントラストを算出できます

automaticWCAG 1.4.3, 1.4.6 (AAA)確度：high重大度：seriousperceivable

可視テキストについてWCAGの色のコントラストを算出するのに十分な情報があるかどうかを判定します（例：背景が特定できなくなるグラデーション、画像、ブレンドモードがないこと）。

適用範囲：スコープ内のすべての可視テキストノードに加え、<input type="button">/[type="submit"]/[type="reset"]のラベルにも適用されます。これらのラベルはvalue属性からレンダリングされるため、テキストノードをたどるだけでは見つかりません。さらに、フォームフィールドが表示するテキストにも適用されます。<textarea>、またはテキストを表示する<input>（text、search、email、url、tel、password、number、日付と時刻のタイプ）の現在の値、あるいは値が空の間はそのプレースホルダーです。プレースホルダーは::placeholderの色、フォント、不透明度、背景で評価します（ブラウザーがそのスタイルを算出する場合に限ります。jsdomは算出しません）。ドロップダウンの<select>（multipleがなく、sizeが1または指定なしで、appearance: base-selectでないもの）のテキストは、selectのテキストとして、閉じた状態のコントロールが描画する色、フォント、背景で評価します。対象は表示されているoptionと、selectと同じ色を持つほかのoptionです。ブラウザーでは、::beforeや::afterのcontentが生成するテキスト（文字列、ブラウザーが解決したattr()、カウンター）と、リスト項目の::markerのテキスト（数字や文字、または文字列。黒丸や画像はテキストではありません）も対象で、それぞれ疑似要素の色とフォントで、その要素上で評価します。jsdomは疑似要素のスタイルを算出しないため、jsdomではこれらを除きます。テキストが対象となるのは、その要素が実行時の可視性モードでDOM上可視であり、sr-onlyの手法（clipまたはclip-path）で見えないように切り取られておらず、無効なコントロールにもそのラベルにも属していない場合だけです（最後の条件はWCAGの非アクティブなユーザーインターフェースコンポーネントの例外）。engineOptions.excludeSelectorsで除外されたサブツリーはスキップされ、オープンなシャドウルートはそれ自体がルートとしてたどられます。

期待される結果：適用対象のすべてのテキストノードについて、コントラスト計算の両側をCSSから確定できます。つまり、不透明な色に解決される実効的な背景と、解析可能な前景色です。どちらかが確定できない場合（背景画像やグラデーション（単色のグラデーションはその色とみなし、下線1pxのようにテキストの下に何も描画しないレイヤーは除外します）、mix-blend-mode、filter（すべてのテキストの下に不透明な背景がある場合のdrop-shadow()単独は除きます。その背景が影を隠すためです）やbackdrop-filter、text-shadow（このエンジンにはグリフ描画のモデルがないため考慮できないコントラストが加わる可能性がある）、-webkit-text-strokeの輪郭（独自の色で描かれ、グリフの大部分を占めることが多い）、独自の色を持つ::first-lineや::first-letter（どのテキストに色が付くかは改行位置によって変わる）、祖先のopacity、またはテキスト自身の要素が独自の背景を持つときのその要素のopacityで、背後にあるものに対して解決できないもの、ページのキャンバスを知り得ない場合の、最後まで不透明にならないルートの背景（フレーム内、強制カラーの下。それ以外の場合はキャンバスの上でテキストを測定します。contrast-minimumを参照）、解析できない色、または表示されているもの以外で独自の色、背景、不透明度を持つドロップダウンの<select>のoption（SELECT_OPTION_COLOR：そのoptionはselectが開くリストにしか表示されず、そのリストはプラットフォームがそれらの色か独自の色で描画します）、またはjsdomのようなエミュレーターで、ページが描画されるカラースキームでのテキストの色を求められない場合（COLOR_SCHEME_NOT_RENDERED））、判定結果はその原因を示すcantTellになります。この不確実性を報告するのはこのルールであり、そのおかげでcontrast-minimumとcontrast-enhancedは同じテキストについて比率を推測せずに何も報告しないでいられます。例外が1つあります。ストロークや影で描画されるテキストで、描画に使われるすべての色（見える場合は塗りも含む）が均一な背景に対してAAの比率を下回るものは、contrast-minimumとcontrast-enhancedでfailになり、ここでは確認を求めません。

検出結果が報告する内容：

  • blockerProperty、blockerValue（CSSの効果が妨げている場合）：計算を妨げているCSSプロパティとその値です（例：mix-blend-mode、filter、text-shadow、-webkit-text-stroke、opacity）。
  • blockerSelector（CSSの効果が妨げている場合）：そのプロパティを持つ要素のセレクターです。テキストの祖先要素の場合もあります。
  • backgroundFillType（背景画像またはグラデーションの場合）：image、gradient、imageAndGradient、unknownのいずれかです。
  • background、backgroundAlpha（背景が最後まで不透明にならない場合、または色を解析できない場合）：求められた範囲での背景色（rgba()形式の文字列）と、その不透明度（0〜1）です。
  • eligibleTextCount（passの場合）：チェックしたテキストノードの数です。
  • assumptionsCount、assumptionsApplied（passの場合）：背景を求めるのに仮定が必要だったテキストノードの数と、置いた仮定です。各項目はコードです。ROOT_CANVAS_FALLBACKは、最後まで不透明にならないページの背景を、スキャンが指定したキャンバスの色（contrast.rootCanvasFallback）の上にある、またはページ自身のキャンバスを知り得ない場合（フレーム内、強制カラーの下）にauditorAssistモードでその色（既定では白）の上にあるとみなしたことを示します。ページのカラースキームが与えるキャンバスの上で測定したテキストには、仮定は不要です。
  • generatedBy（測定できない生成テキストの場合）：確認を求めるテキストを持つ疑似要素で、::before、::after、::markerのいずれかです。セレクターはその要素を示します。GENERATED_TEXT_UNREADABLEはテキストを読み取れないcontent（ページ独自のスタイルのカウンター）、GENERATED_TEXT_POSITIONEDは独自の不透明な背景を持たずにフローから外された疑似要素です。
  • forcedColors（測定した色が強制されていた場合、すべての検出箇所）：trueです。ヒントは、強制カラーをオフにしてページを再確認するよう促します。強制カラーの下でのスキャンはページ自身の色を測定するため、これが現れるのは、ページをその色のまま保てなかった場合だけです。

これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。

例

pass
<p style="background:#ffffff; color:#999999;">Body text</p>

前景と背景がどちらも均一で不透明な色なので、比率を算出できます（その後AA/AAAで合格するかどうかは別です）。

can't tell
<p style="background-image:url(texture.png); color:#000000;">Body text</p>

テキストの背後にあるbackground-imageは均一な色ではないため、コントラスト比をまったく算出できません。

確認方法

このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。

ANCESTOR_OPACITY

  1. レポートに示されたテキストを見つけ、opacityが1未満の祖先を控えてください。
  2. ブラウザーの開発者ツールのカラーピッカー、またはスポイトで色を取得したコントラスト計算ツールを使い、描画されたページ上でスポイトを使って、画面に表示される（薄くなった）テキストと背景を測定してください。
  3. 比を、WCAG 1.4.3では4.5:1（大きなテキストは3:1）、1.4.6では7:1（大きなテキストは4.5:1）と比べてください。

満たす場合：画面上の薄くなった色が基準値に達しているか、薄くなったテキストが適用除外となる非アクティブな（無効な）コントロールです。

満たさない場合：画面上の薄くなった色のコントラスト比が基準値を下回るため、テキストが非アクティブなコントロールの一部でない限り、WCAG 1.4.3（または1.4.6）を満たしません。

BACKGROUND_FILTER_OR_BACKDROP_FILTER

  1. レポートに示されたテキストを見つけ、そのテキストまたは祖先にあるfilterまたはbackdrop-filterを控えてください（開発者ツールの[Styles]ペインで確認できます）。
  2. ブラウザーの開発者ツールのカラーピッカー、またはスポイトで色を取得したコントラスト計算ツールを使い、フィルターが適用された状態で画面に表示されるテキストと背景の色を測定してください。指定された値ではなく、描画されたページ上でスポイトを使ってください。
  3. 変化するコンテンツの上にぼかしやbackdrop-filterがある場合は、スクロールするか待って背後をさまざまなコンテンツが通るようにし、最も悪い場合を確認してください。
  4. 比を、WCAG 1.4.3では4.5:1（大きなテキストは3:1）、1.4.6では7:1（大きなテキストは4.5:1）と比べてください。

満たす場合：フィルターが適用された状態で、画面上のコントラスト比が基準値に達しています。

満たさない場合：フィルターが適用された状態で、画面上のコントラスト比が基準値を下回るため、WCAG 1.4.3（または1.4.6）を満たしません。

BACKGROUND_IMAGE_OR_GRADIENT

  1. レポートに示されたテキストを見つけ、その背後にある画像またはグラデーションを確認してください。
  2. ブラウザーの開発者ツールのカラーピッカー、またはスポイトで色を取得したコントラスト計算ツールを使い、文字のすぐ背後にある背景の最も明るい部分と最も暗い部分に対して、テキストの色を測定してください。
  3. 画像が変わる場合（スライド、動画、レスポンシブ画像）は、それぞれの版をいくつかのウィンドウ幅で確認してください。
  4. 比を、WCAG 1.4.3では4.5:1（大きなテキストは3:1）、1.4.6では7:1（大きなテキストは4.5:1）と比べてください。

満たす場合：文字の背後にある背景のどの部分でも、基準値以上のコントラスト比が得られます。

満たさない場合：テキストの背後にある背景の一部でコントラスト比が基準値を下回るため、WCAG 1.4.3（または1.4.6）を満たしません。

BACKGROUND_NOT_COMPUTABLE

  1. レポートに示されたテキストをページ上で見つけてください。
  2. ブラウザーの開発者ツールのカラーピッカー、またはスポイトで色を取得したコントラスト計算ツールを使い、文字のすぐ背後に見える色に対してテキストの色を測定してください。色が変化する場合は、最も暗い点と最も明るい点で測ってください。
  3. 比を、WCAG 1.4.3では4.5:1（大きなテキストは3:1）、1.4.6では7:1（大きなテキストは4.5:1）と比べてください。

満たす場合：テキストの背後のどこでも、コントラスト比が基準値に達しています。

満たさない場合：テキストの背後のどこかでコントラスト比が基準値を下回るため、WCAG 1.4.3（または1.4.6）を満たしません。

BACKGROUND_NOT_OPAQUE_AT_ROOT

  1. レポートに示されたテキストを見つけてください。ページはその背後に不透明な背景を指定していないため、そこにはブラウザーが描くキャンバス、またはフレーム内では周囲のページが表示されます。
  2. ページが表示される場所で確認してください。埋め込み先のページの中で、強制カラーをオフにして、ページが対応する各配色（ライトとダーク）で確認します。
  3. ブラウザーの開発者ツールのカラーピッカー、またはスポイトで色を取得したコントラスト計算ツールを使い、各設定で実際に見える背景に対してテキストを測定してください。
  4. 比を、WCAG 1.4.3では4.5:1（大きなテキストは3:1）、1.4.6では7:1（大きなテキストは4.5:1）と比べてください。

満たす場合：ページが表示されるすべての設定で、コントラスト比が基準値に達しています。

満たさない場合：ページが表示されるいずれかの設定でコントラスト比が基準値を下回るため、WCAG 1.4.3（または1.4.6）を満たしません。

BACKGROUND_OVERLAP

  1. レポートに示されたテキストを見つけ、実際にその背後に描画されている要素を確認してください（要素を調べ、重なっている要素の表示を切り替えます）。
  2. ブラウザーの開発者ツールのカラーピッカー、またはスポイトで色を取得したコントラスト計算ツールを使い、文字の背後に実際に見える色に対して、テキストの色を測定してください。
  3. 比を、WCAG 1.4.3では4.5:1（大きなテキストは3:1）、1.4.6では7:1（大きなテキストは4.5:1）と比べてください。

満たす場合：テキストの背後に実際にある色に対して、基準値以上のコントラスト比が得られます。

満たさない場合：テキストの背後に実際にある色に対するコントラスト比が基準値を下回るため、WCAG 1.4.3（または1.4.6）を満たしません。

BACKGROUND_UNPARSABLE

  1. レポートに示されたテキストを見つけ、開発者ツールで背景色の値を調べてください（oklch()、lab()、color()など新しい構文であることが多いです）。
  2. ブラウザーの開発者ツールのカラーピッカー、またはスポイトで色を取得したコントラスト計算ツールを使い、画面に描画された背景に対してテキストの色を測定してください。
  3. 比を、WCAG 1.4.3では4.5:1（大きなテキストは3:1）、1.4.6では7:1（大きなテキストは4.5:1）と比べてください。

満たす場合：コントラスト比が基準値に達しています。

満たさない場合：コントラスト比が基準値を下回るため、WCAG 1.4.3（または1.4.6）を満たしません。

COLOR_SCHEME_NOT_RENDERED

  1. レポートに示された配色（blockerValue: lightまたはdark）に設定したブラウザーでページを開くか、開発者ツールでエミュレートしてください（レンダリング、prefers-color-scheme）。
  2. レポートに示されたテキストを見つけ、ブラウザーの開発者ツールのカラーピッカー、またはスポイトで色を取得したコントラスト計算ツールを使って、その背後の背景に対するコントラストを測定してください。
  3. 比を、WCAG 1.4.3では4.5:1（大きなテキストは3:1）、1.4.6では7:1（大きなテキストは4.5:1）と比べてください。

満たす場合：その配色でコントラスト比が基準値に達しています。

満たさない場合：その配色でコントラスト比が基準値を下回るため、WCAG 1.4.3（または1.4.6）を満たしません。

ELEMENT_OPACITY

  1. レポートに示されたテキストを見つけ、その要素にある1未満のopacityを控えてください。
  2. ブラウザーの開発者ツールのカラーピッカー、またはスポイトで色を取得したコントラスト計算ツールを使い、描画されたページ上でスポイトを使って、画面に表示される（薄くなった）テキストと背景を測定してください。
  3. 比を、WCAG 1.4.3では4.5:1（大きなテキストは3:1）、1.4.6では7:1（大きなテキストは4.5:1）と比べてください。

満たす場合：画面上の薄くなった色が基準値に達しているか、薄くなったテキストが適用除外となる非アクティブな（無効な）コントロールです。

満たさない場合：画面上の薄くなった色のコントラスト比が基準値を下回るため、テキストが非アクティブなコントロールの一部でない限り、WCAG 1.4.3（または1.4.6）を満たしません。

ENGINE_EXCEPTION

  1. レポートに示されたテキストを見つけてください（チェックが途中で止まったため、何も測定されていません）。
  2. ブラウザーの開発者ツールのカラーピッカー、またはスポイトで色を取得したコントラスト計算ツールを使い、文字のすぐ背後にある背景に対してテキストの色を測定してください。
  3. テキストのサイズと太さを控え、大きなテキスト（24px以上、または18.66px以上の太字）に当たるかを判断してください。
  4. 比を、WCAG 1.4.3では4.5:1（大きなテキストは3:1）、1.4.6では7:1（大きなテキストは4.5:1）と比べてください。

満たす場合：サイズに応じた基準値にコントラスト比が達しています。

満たさない場合：サイズに応じた基準値をコントラスト比が下回るため、WCAG 1.4.3（または1.4.6）を満たしません。

FOREGROUND_UNPARSABLE

  1. レポートに示されたテキストを見つけ、開発者ツールでその色の値を調べてください（oklch()、lab()、color()など新しい構文であることが多いです）。
  2. ブラウザーの開発者ツールのカラーピッカー、またはスポイトで色を取得したコントラスト計算ツールを使い、描画されたテキストの色をその背景に対して測定してください。
  3. 比を、WCAG 1.4.3では4.5:1（大きなテキストは3:1）、1.4.6では7:1（大きなテキストは4.5:1）と比べてください。

満たす場合：コントラスト比が基準値に達しています。

満たさない場合：コントラスト比が基準値を下回るため、WCAG 1.4.3（または1.4.6）を満たしません。

GENERATED_TEXT_POSITIONED

  1. レポートに示された要素を見つけ、その::beforeまたは::afterが画面上に描画するテキストの位置を確かめてください（要素から離れた位置に配置されています）。
  2. ブラウザーの開発者ツールのカラーピッカー、またはスポイトで色を取得したコントラスト計算ツールを使い、実際の位置でそのテキストの背後に見えるものに対して、テキストの色を測定してください。
  3. ウィンドウの大きさを変えたりスクロールしたりして、別の背景の上に来る可能性のあるほかの位置も確認してください。
  4. 比を、WCAG 1.4.3では4.5:1（大きなテキストは3:1）、1.4.6では7:1（大きなテキストは4.5:1）と比べてください。

満たす場合：どこに配置されても、生成されたテキストは基準値に達しています。

満たさない場合：生成されたテキストが配置される位置でコントラスト比が基準値を下回るため、WCAG 1.4.3（または1.4.6）を満たしません。

GENERATED_TEXT_UNREADABLE

  1. レポートに示された要素を見つけ、その::before、::after、またはリストマーカーが描画するテキスト（番号、行頭記号、ラベル）を確認してください。
  2. それが読む必要のあるテキスト（番号、単語、ラベル）か、純粋に装飾的な図形かを判断してください。
  3. テキストであれば、ブラウザーの開発者ツールのカラーピッカー、またはスポイトで色を取得したコントラスト計算ツールを使い、その背後にある背景に対して色を測定してください。
  4. 比を、WCAG 1.4.3では4.5:1（大きなテキストは3:1）、1.4.6では7:1（大きなテキストは4.5:1）と比べてください。

満たす場合：生成されたテキストが基準値に達しているか、純粋に装飾的なものです。

満たさない場合：生成されたテキストは読む必要のあるコンテンツで、コントラスト比が基準値を下回るため、WCAG 1.4.3（または1.4.6）を満たしません。

MIX_BLEND_MODE

  1. レポートに示されたテキストを見つけ、そのテキストまたはコンテナーにあるmix-blend-modeを控えてください。
  2. ブラウザーの開発者ツールのカラーピッカー、またはスポイトで色を取得したコントラスト計算ツールを使い、描画されたページ上でスポイトを使って、画面に表示される合成後のテキストと背景の色を測定してください。
  3. 背後にさまざまなコンテンツが来る可能性がある場合（スクロール、スライダー）は、最も悪い場合を確認してください。
  4. 比を、WCAG 1.4.3では4.5:1（大きなテキストは3:1）、1.4.6では7:1（大きなテキストは4.5:1）と比べてください。

満たす場合：画面上の合成後の色が基準値に達しています。

満たさない場合：画面上の合成後の色のコントラスト比が基準値を下回るため、WCAG 1.4.3（または1.4.6）を満たしません。

PSEUDO_ELEMENT_COLOR

  1. レポートに示されたテキストを見つけ、[Styles]ペインで::first-lineまたは::first-letterの色を控えてください。
  2. ブラウザーの開発者ツールのカラーピッカー、またはスポイトで色を取得したコントラスト計算ツールを使い、要素のテキストの色と、first-lineまたはfirst-letterの色の両方を背景に対して測定してください。
  3. ウィンドウの大きさを変えて、幅によってfirst-lineの色が異なる単語に適用されることを確認してください。
  4. 比を、WCAG 1.4.3では4.5:1（大きなテキストは3:1）、1.4.6では7:1（大きなテキストは4.5:1）と比べてください。

満たす場合：どちらの色も基準値に達しています。

満たさない場合：いずれかの色のコントラスト比が基準値を下回るため、WCAG 1.4.3（または1.4.6）を満たしません。

SELECT_OPTION_COLOR

  1. レポートに示されたドロップダウンを見つけ、マウスとAlt+下矢印キーで開いてください。
  2. ブラウザーの開発者ツールのカラーピッカー、またはスポイトで色を取得したコントラスト計算ツールを使い、ページが対応する各ブラウザーで、開いたリスト内の各選択肢のテキストを、強調表示された選択肢も含めて背景に対して測定してください。
  3. 比を、WCAG 1.4.3では4.5:1（大きなテキストは3:1）、1.4.6では7:1（大きなテキストは4.5:1）と比べてください。

満たす場合：開いたリスト内のすべての選択肢が基準値に達しています。

満たさない場合：開いたリスト内のいずれかの選択肢のコントラスト比が基準値を下回るため、WCAG 1.4.3（または1.4.6）を満たしません。

TEXT_SHADOW

  1. レポートに示されたテキストを見つけ、そのtext-shadowを控えてください。
  2. ブラウザーの開発者ツールのカラーピッカー、またはスポイトで色を取得したコントラスト計算ツールを使い、背景に対してテキストの塗りの色を測定してください。
  3. 塗りが基準を満たさない場合は、拡大して影がすべての文字の周りにはっきりした輪郭や縁取りを形成しているか確認し、そうであれば影の色を背景に対して、塗りの色を影に対して測定してください。
  4. 比を、WCAG 1.4.3では4.5:1（大きなテキストは3:1）、1.4.6では7:1（大きなテキストは4.5:1）と比べてください。

満たす場合：塗りが背景に対して基準値に達しているか、すべての文字をはっきりした縁取りが囲み、基準値のコントラスト比が得られます。

満たさない場合：背景に対する塗りも、文字の周りのはっきりした縁取りも基準値に達しないため、WCAG 1.4.3（または1.4.6）を満たしません。

TEXT_STROKE

  1. レポートに示されたテキストを見つけ、その-webkit-text-strokeの幅と色を控えてください。
  2. ブラウザーの開発者ツールのカラーピッカー、またはスポイトで色を取得したコントラスト計算ツールを使い、背景に対して塗りの色と輪郭線の色をそれぞれ測定してください。
  3. 拡大して、各文字の大部分をどの色が形作っているか確認してください（細い輪郭線は塗りより影響が小さくなります）。
  4. 比を、WCAG 1.4.3では4.5:1（大きなテキストは3:1）、1.4.6では7:1（大きなテキストは4.5:1）と比べてください。

満たす場合：塗りと輪郭線の両方が基準値に達しているか、明らかに文字を形作っている色が基準値に達しています。

満たさない場合：文字を形作っている色のコントラスト比が基準値を下回るため、WCAG 1.4.3（または1.4.6）を満たしません。

ソースコードを見る