日本語
サイトメニュー

contrast-minimum

テキストは最低限の色のコントラスト（AA）を満たします

automaticWCAG 1.4.3 (AA)確度：high重大度：seriousperceivable

CSSからコントラストを算出できる場合に、可視テキストのコントラスト比が4.5:1以上（通常のテキスト）または3:1以上（大きなテキスト）であることを確認します。

適用範囲：contrast-computableの対象となる可視テキスト（対象となる条件はそのルールを参照）のうち、背景と前景を実際に算出できるものに適用されます。対象となるテキストでも算出できない場合、このルールはcantTellではなくnotApplicableになります。その不確実性を報告するのはcontrast-computableの役割なので、2つのルールが同じテキストを二重に報告することはありません。

期待される結果：算出可能なすべてのテキストノードが、そのサイズに応じて達成基準1.4.3が求める比率に達しています。大きなテキストは3:1、それ以外は4.5:1です。テキストは、24px以上、または算出されたフォントの太さが700以上で14pt（約18.667px）以上の場合に大きなテキストとみなされます。-webkit-text-strokeやtext-shadowで描画されるテキストは、contrast-computableに任せます。ただし、描画に使われるすべての色（塗りが何も描画しない（透明、または背景と同じ色の）場合を除き、塗りも含む）が均一な背景に対して比率を下回る場合は別です。そのときはどう読み取っても達成基準を満たせないためfailになり、それらの色のうち最もよいもので測定します（drawnBy：textStrokeまたはtextShadow）。マージン（contrast-ratio）：比率に達しているテキストのうち、その比率に最も近い要素で、サイズに応じて求められる比率に対する、丸めていない比率を示します。どちらの比率が求められているかはcontext.largeTextが示します。比率から10%以内のテキストだけを近いとみなすため、それより大きく上回るテキストからはマージンは得られません。measuredCountは、コントラストを算出した要素の数です。テキストの一部を::first-lineや::first-letterが独自の色で描画する場合は、両方の色で測定します。両方が比率に達すればpass、両方が下回ればfail（疑似要素はpseudoElementColorが示します）で、結果が分かれる場合はcontrast-computableに任せます。contrast-computableは、WCAGの比率で確認を求める対象を決めます。このルール独自の比率（バリアントの設定）では、その比率でだけ結果が分かれる2色のテキストと、最もよい色がその比率には達するもののWCAGのAAの比率には達しない輪郭や影で描画されるテキストについて、ここで確認を求めます（PSEUDO_ELEMENT_COLOR、TEXT_STROKE、TEXT_SHADOW）。ほかのルールでは扱われないためです。最もよい色がWCAGのAAの比率とバリアントのより高い比率の間にある輪郭で描画されるテキストは、ここでfailになり、contrast-computableでも確認を求められます。バリアントの要件とWCAG 1.4.3という2つの要件に対する、2つの答えです。フィールドのプレースホルダーが比率を下回る場合（PLACEHOLDER_BELOW_THRESHOLD）は、ページがその色を選んでいればfailになります。つまり、プレースホルダーの色、不透明度、背景、またはフィールドの背景が、空のフレームで読み取ったブラウザー自身のものと異なる場合です。ブラウザー自身の色のままのプレースホルダーは比率を満たすものとみなし（WCAG G148）、どちらか判断できない場合はcantTellの検出箇所になります。ルートまで背後に不透明な背景がないテキストは、どちらのコントラストモードでも、ブラウザーがページの下に描画するキャンバスの上で測定します。CSS Color Adjustment 1の定義に従い、ページが描画されるカラースキームのCanvas色で、そのスキームはページ自身のcolor-scheme（ルート、または<meta name="color-scheme">）が決めます。スキームを宣言していないページは、ユーザーの好みにかかわらずライトで、白の上に描画されます。ダークだけを宣言するページはダークのキャンバスの上です。ブラウザーでは色をページから読み取ります。システムカラーを解決しないエミュレーター（jsdom）では、Chromiumの色（ダークのキャンバスは#121212、ダークのスキームが与えるテキストは#ffffff）を使います。スキャンが指定したキャンバス（contrast.rootCanvasFallback）があれば、代わりにその上で測定します。キャンバスを知り得ない場合（フレーム内では周囲のページが透けて見える可能性があり、強制カラーの下ではユーザーのパレットになります）、テキストはcontrast-computableに任せるか、auditorAssistモードでフォールバックの上で測定します。両方のスキームに対応するページ（light dark）は、ユーザーが好むほうで描画されます。スキャンはそちらを見て（ブラウザーでは描画されたとおり、jsdomはライトで描画します）、テキストをそこで測定し、色がスキームによって変わり得ない場合は、もう一方のスキームでもそのスキームのキャンバスの上で測定します。変わり得るのは、prefers-color-schemeのクエリ内のルール、light-dark()の値、またはシステムカラー（ルールがテキストに色を付けていない場合の、そのスキーム自身のテキストとリンクの色を除く）が、テキストの色やその背後の背景に及ぶ場合です。測定したいずれかのスキームでfailになればfail、それぞれのスキームでpassになればpassです。

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

  • metrics.ratio（しきい値を下回るテキスト）：背景に対するテキストのコントラスト比（4.5:1なら4.5）で、そのサイズに必要な比であるmetrics.thresholdと比較されます。
  • colors.foregroundHex、colors.backgroundHex（しきい値を下回るテキスト）：テキストの色（実際に描画される-webkit-text-fill-colorで、設定がなければcolor）とその背後の背景色で、透明度を合成した後の16進数表記です。colors.foregroundRgbaとcolors.backgroundRgbaは、同じ2色をrgba()形式で示します。
  • selectField（ブラウザー自身の背景で描画されるドロップダウンのselect）：算出された背景であるbackgroundHexと、Chromiumが描画に使うField色であるfieldHexです。テキストは両方に対して測定し、低いほうの比率を報告します。
  • typography.fontSizePx、typography.fontSizePt（しきい値を下回るテキスト）：描画されるときのフォントサイズで、CSSピクセル単位とポイント単位です。算出されたサイズにCSSのzoomを掛けたもの、SVGテキストではviewBoxとtransformによる拡大縮小を反映したもので、さらにfont-size-adjustによるフォントの拡大縮小（調整値をフォント自身のアスペクト値で割ったもので、ブラウザーで読み取ります）を掛けます。大きなテキストのしきい値はこのサイズで判定します。WCAGのいう「size when the content is delivered」にあたります。
  • typography.declaredFontSizePx、typography.sizeScaledBy（しきい値を下回り、別のサイズで描画されたテキスト）：算出されたfont-sizeと、テキストを別のサイズで描画させたもの（zoom、svg、font-size-adjust）です。それによってテキストが大きなテキストの境界の反対側に来る場合は、ヒントがその旨を示します（contrast_hint_drawnSize）。
  • typography.fontWeight、typography.fontWeightLabel（しきい値を下回るテキスト）：算出されたフォントの太さで、数値（400、700）と記述されたとおりの値です。
  • typography.isBold、typography.isLargeText（しきい値を下回るテキスト）：テキストが太字とみなされるかどうか、そして3:1だけが求められるサイズである大きなテキストとみなされるかどうかです。
  • 上記の比率、しきい値、タイポグラフィのフィールドは、data.detailsのほかのフィールドと異なり、安定した契約です。
  • assumptionsApplied、assumedRootCanvasColor（しきい値を下回るテキスト）：ページに不透明な背景が設定されておらず、テキストを、スキャンが指定したキャンバスの色（contrast.rootCanvasFallback）の上で、またはページ自身のキャンバスを知り得ない場合（フレーム内、強制カラーの下）にauditorAssistモードでフォールバック（既定では白）の上で測定した場合を除いてnullです。その場合、assumptionsAppliedは['ROOT_CANVAS_FALLBACK']、assumedRootCanvasColorはその色です。
  • colorScheme（ライトとダークの両方に対応するページのキャンバスの上で、しきい値を下回るテキスト）：テキストが比率を下回るスキームで、'light'または'dark'です。もう一方のスキームでは合格しており、ヒントがそのスキームを示します。比率と色はそのスキームのものです。測定したどのスキームでも下回る場合（そのときはページが描画されるスキームで報告します）と、スキームが1つだけのページでは付きません。
  • colorSchemesChecked（しきい値を下回るテキスト、およびpassの場合）：キャンバスの上のテキストを測定したスキームで、['light']または['dark']です。ページが両方に対応し、一方を測定できなかった場合に付きます。バインディングは、ブラウザーをもう一方のスキームにして再スキャンできます。ページが対応するすべてのスキームを測定した場合は付きません。
  • generatedBy（しきい値を下回る生成テキスト）：測定したテキストを持つ疑似要素で、::before、::after、::markerのいずれかです。セレクターはその要素を示し、色とフォントは疑似要素のものです。
  • eligibleTextCount、computableTextCount（何もfailにならなかったときの要約）：ルールが調べたテキストノードの数と、そのうち色を計算できたものの数です。passの場合はmetricsの下にも繰り返します。
  • forcedColors（測定した色が強制されていた場合、すべての検出箇所）：trueです。ヒントは、強制カラーをオフにしてページを再確認するよう促します。強制カラーの下でのスキャンはページ自身の色を測定するため、これが現れるのは、ページをその色のまま保てなかった場合だけです。

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

マージン：このルールはcontrast-ratioを比として測定し、値はしきい値に達している必要があります。しきい値を満たした値がしきい値の近くにあった場合、結果のmarginは、しきい値を満たしつつ最もしきい値に近づいた要素を示します。そのため、わずかな変更で判定結果が変わる箇所を、変わる前に把握できます。検出結果のフィールドとは異なり、安定した契約です。出力スキーマを参照してください。

例

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

約4.6:1で、通常のテキストに対するAAの最小値4.5:1を上回っています。

fail
<div style="background:#ffffff;">
  <div style="opacity:0.5; background:#ffffff;">
    <p style="color:#000000;">Body text</p>
  </div>
</div>

白の上で祖先（グループ）のopacityが50%になっているため、合成すると約4:1の均一な灰色になり、AAの最小値を下回ります。

確認方法

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

CONTRAST_SWITCH_OFFERED

  1. レポートに示されたコントラスト切り替えを見つけ、ページの上部またはすべてのページにあって見つけやすく、キーボードで到達できることを確認してください。
  2. 切り替えをオンにしてください。
  3. レポートに示されたテキストを見つけ、ブラウザーの開発者ツールのカラーピッカー、またはスポイトで色を取得したコントラスト計算ツールを使って背景に対して測定し、4.5:1（大きなテキスト、つまり24px以上または18.66px以上の太字では3:1）と比べてください。
  4. 別のページに移動し、設定が維持されていることを確認してください。

満たす場合：切り替えは見つけやすく使いやすく、オンにするとテキストが基準のコントラスト比に達します（G174）。

満たさない場合：切り替えが見つけにくいか、このテキストを基準のコントラスト比まで引き上げないため、テキストはWCAG 1.4.3を満たしません。

ENGINE_EXCEPTION

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

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

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

LOGO_TEXT_BELOW_THRESHOLD

  1. レポートに示されたテキストを見つけてください（サイトのヘッダーやホームへのリンクにあることが多いです）。
  2. それがスローガン、メニュー項目、その他のテキストではなく、ロゴのデザインで表されたサイト名のように、ロゴやブランド名の一部であるかを判断してください。
  3. ロゴのテキストでなければ、ブラウザーの開発者ツールのカラーピッカー、またはスポイトで色を取得したコントラスト計算ツールを使って背景に対して測定し、4.5:1（大きなテキスト、つまり24px以上または18.66px以上の太字では3:1）と比べてください。

満たす場合：テキストはコントラストの要件がないロゴやブランド名の一部であるか、基準のコントラスト比に達しています。

満たさない場合：テキストはロゴやブランド名の一部ではなく、基準のコントラスト比を下回るため、WCAG 1.4.3を満たしません。

PLACEHOLDER_BELOW_THRESHOLD

  1. レポートに示されたフィールドを見つけ、中身を空にしてプレースホルダーが表示されるようにしてください。
  2. [Styles]ペインで、ページのCSSが::placeholderの色やopacity、またはフィールドの背景を指定しているか確認してください。
  3. ブラウザーの開発者ツールのカラーピッカー、またはスポイトで色を取得したコントラスト計算ツールを使い、フィールドの背景に対してプレースホルダーのテキストを測定し、4.5:1（大きなテキスト、つまり24px以上または18.66px以上の太字では3:1）と比べてください。
  4. プレースホルダーが単なる例ではなく、フィールドの入力に必要な情報（形式や指示）を含んでいるか確認してください。

満たす場合：プレースホルダーが4.5:1（大きなテキストなら3:1）に達しているか、すべてブラウザー自身の既定の色で描画されています。

満たさない場合：ページがプレースホルダーまたはフィールドの色を指定しており、コントラスト比が基準値を下回るため、WCAG 1.4.3を満たしません。

PSEUDO_ELEMENT_COLOR

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

満たす場合：どちらの色も必要な比に達しています。

満たさない場合：いずれかの色のコントラスト比が必要な比を下回るため、テキストはこのチェックを満たしません。

SEMIBOLD_BELOW_THRESHOLD

  1. レポートに示されたセミボールドのテキストを見つけてください。
  2. ページ上または開発者ツールでfont-weightを切り替えながら、同じサイズとフォントの太字（ウェイト700）のテキストと並べて比べてください。
  3. 太字に見えるかを判断してください。太字に見えれば大きなテキストとして3:1、そうでなければ4.5:1が必要です。

満たす場合：テキストは太字に見えるため大きなテキストであり、コントラスト比は3:1を満たしています。

満たさない場合：テキストは太字に見えないため通常のテキストであり、4.5:1を下回るため、WCAG 1.4.3を満たしません。

SYMBOLIC_CHARACTER_BELOW_THRESHOLD

  1. レポートに示された文字（×、☰、›、アイコンフォントのグリフなど）を見つけてください。
  2. それが読むためのテキスト（単語の一部、数字）か、閉じるやメニューの記号のように操作を表すアイコンかを判断してください。
  3. テキストであれば、ブラウザーの開発者ツールのカラーピッカー、またはスポイトで色を取得したコントラスト計算ツールを使って背景に対して測定し、4.5:1（大きなテキスト、つまり24px以上または18.66px以上の太字では3:1）と比べてください。
  4. アイコンの場合は、まず隣に同じ意味の見えるテキストがあるか確認してください（閉じる記号の横の「閉じる」という語など）。ある場合、そのアイコンは理解するための唯一の手段ではなく、3:1のコントラスト比は必要ありません。
  5. そうでない場合は、アイコンを背景に対して測定し、3:1と比べてください（WCAG 1.4.11）。

満たす場合：テキストで基準のコントラスト比に達しているか、3:1に達しているか、隣の見えるテキストが同じ意味を示しているアイコンです。

満たさない場合：4.5:1未満のテキストでWCAG 1.4.3を満たさないか、意味や機能を知る唯一の見える手段である3:1未満のアイコンでWCAG 1.4.11を満たしません。

TEXT_SHADOW

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

満たす場合：文字を形作っている色が必要な比に達しています。

満たさない場合：文字を形作っている色のコントラスト比が必要な比を下回るため、テキストはこのチェックを満たしません。

TEXT_STROKE

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

満たす場合：文字を形作っている色が必要な比に達しています。

満たさない場合：文字を形作っている色のコントラスト比が必要な比を下回るため、テキストはこのチェックを満たしません。

ソースコードを見る