contrast-enhanced
テキストは高度な色のコントラスト(AAA)を満たします
CSSからコントラストを算出できる場合に、可視テキストのコントラスト比が7:1以上(通常のテキスト)または4.5:1以上(大きなテキスト)であることを確認します。
適用範囲:contrast-computableの対象となる可視テキスト(対象となる条件はそのルールを参照)のうち、背景と前景を実際に算出できるものに適用されます。対象となるテキストでも算出できない場合、このルールはcantTellではなくnotApplicableになります。その不確実性を報告するのはcontrast-computableの役割なので、2つのルールが同じテキストを二重に報告することはありません。
期待される結果:算出可能なすべてのテキストノードが、そのサイズに応じて達成基準1.4.6が求める比率に達しています。大きなテキストは4.5:1、それ以外は7: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-minimumの説明のとおりです。背景を求められない通常サイズのテキストも、どの背景に対しても7:1に達し得ない色であればfailになります(CONTRAST_UNREACHABLE_ANY_BACKGROUND、metrics.bestRatio:白と黒のうち高いほうに対する比率)。フィールドのプレースホルダーが比率を下回る場合(PLACEHOLDER_BELOW_THRESHOLD)は、ページがその色を選んでいればfailになります。つまり、プレースホルダーの色、不透明度、背景、またはフィールドの背景が、空のフレームで読み取ったブラウザー自身のものと異なる場合です。ブラウザー自身の色のままのプレースホルダーは比率を満たすものとみなし(WCAG G148)、どちらか判断できない場合はcantTellの検出箇所になります。
検出結果が報告する内容:
metrics.ratio(failの場合):テキストのコントラスト比です(例:4.5:1なら4.5、丸めなし)。metrics.threshold(7、大きなテキストでは4.5)と比較されます。colors.foregroundHex、colors.backgroundHex(failの場合):比の計算に使ったテキストと背景の色で、16進数表記です(テキストの色は実際に描画される-webkit-text-fill-colorで、設定がなければcolorです)。半透明のテキストの色は、先に背景と合成します。selectField(ブラウザー自身の背景で描画されるドロップダウンのselect):算出された背景であるbackgroundHexと、Chromiumが描画に使うField色であるfieldHexです。テキストは両方に対して測定し、低いほうの比率を報告します。colors.foregroundRgba、colors.backgroundRgba(failの場合):同じ色をrgba()形式の文字列で示したものです。typography.fontSizePx、typography.fontSizePt(failの場合):描画されるときのフォントサイズ(算出されたサイズにCSSのzoomを掛けたもの、SVGテキストではviewBoxとtransformによる拡大縮小を反映したもの。さらにfont-size-adjustによるフォントの拡大縮小を掛けたもの)で、CSSピクセル単位とポイント単位です。typography.declaredFontSizePx、typography.sizeScaledBy(別のサイズで描画されたテキストでのfailの場合):算出されたfont-sizeと、テキストを別のサイズで描画させたもの(zoom、svg、font-size-adjust)です。それによってテキストが大きなテキストの境界の反対側に来る場合は、ヒントがその旨を示します(contrast_hint_drawnSize)。typography.fontWeight、typography.fontWeightLabel、typography.isBold(failの場合):算出されたフォントの太さを示す数値、bold(700以上)またはnormal、そして太字とみなされるかどうかです。typography.isLargeText(failの場合):テキストが大きなテキストとみなされるかどうかで、これによってしきい値が決まります。- 上記の比率、しきい値、タイポグラフィのフィールドは、
data.detailsのほかのフィールドと異なり、安定した契約です。 assumptionsApplied、assumedRootCanvasColor(failの場合):ページの背景が最後まで不透明にならず、キャンバスの色の上にあるとみなした場合を除いてnullです。その色は、スキャンが指定したもの(contrast.rootCanvasFallback)か、ページ自身のキャンバスを知り得ない場合(フレーム内、強制カラーの下)のauditorAssistモードでのフォールバックです。その場合、assumptionsAppliedは["ROOT_CANVAS_FALLBACK"]、assumedRootCanvasColorはその色です。ページのカラースキームが与えるキャンバスの上のテキストはそのキャンバスの上で測定し、どちらも付きません。colorScheme(ライトとダークの両方に対応するページのキャンバスの上でのfailの場合):テキストが比率を下回るスキームで、'light'または'dark'です。もう一方のスキームでは合格しています。測定したどのスキームでも下回る場合は付きません。colorSchemesChecked(failの場合とpassの場合):キャンバスの上のテキストを測定したスキームです。ページが両方に対応し、一方を測定できなかった場合に付きます。generatedBy(生成テキストでのfailの場合):測定したテキストを持つ疑似要素で、::before、::after、::markerのいずれかです。セレクターはその要素を示し、色とフォントは疑似要素のものです。eligibleTextCount、computableTextCount(passの場合、および計算できるテキストがなかったときのnotApplicableの結果):対象範囲にあったテキストノードの数と、そのうち色を求められたものの数です。passの場合は、両方をmetricsの下にも繰り返します。forcedColors(測定した色が強制されていた場合、すべての検出箇所):trueです。ヒントは、強制カラーをオフにしてページを再確認するよう促します。強制カラーの下でのスキャンはページ自身の色を測定するため、これが現れるのは、ページをその色のまま保てなかった場合だけです。
これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。
マージン:このルールはcontrast-ratioを比として測定し、値はしきい値に達している必要があります。しきい値を満たした値がしきい値の近くにあった場合、結果のmarginは、しきい値を満たしつつ最もしきい値に近づいた要素を示します。そのため、わずかな変更で判定結果が変わる箇所を、変わる前に把握できます。検出結果のフィールドとは異なり、安定した契約です。出力スキーマを参照してください。
例
<p style="background:#ffffff; color:#000000;">Body text</p>
白地に黒はおよそ21:1で、AAAのしきい値7:1を大きく上回っています。
<p style="background:#ffffff; color:#767676;">Body text</p>
白地に灰色は約4.6:1で、AAの最小値は満たしますが、より厳しいAAAのしきい値7:1は満たしません。
確認方法
このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。
CONTRAST_UNREACHABLE_ANY_BACKGROUND
- レポートに示されたテキストを見つけ、レポートに記載されたその色を控えてください。
- コントラスト計算ツールで、その色を白に対して、また黒に対して測定してください。
- 2つのコントラスト比のうち高い方を7:1と比べてください。
満たす場合:白または黒に対してテキストの色が7:1に達するため、背景によってはこのコントラスト比に届きます。その場合は実際の背景に対して測定してください。
満たさない場合:白に対しても黒に対してもテキストの色が7:1を下回るため、どの背景でもこのコントラスト比に届かず、WCAG 1.4.6を満たしません。
ENGINE_EXCEPTION
- レポートに示されたテキストを見つけてください(チェックが途中で止まったため、何も測定されていません)。
- ブラウザーの開発者ツールのカラーピッカー、またはスポイトで色を取得したコントラスト計算ツールを使い、文字のすぐ背後にある背景に対してテキストの色を測定してください。
- テキストのサイズと太さを控え、コントラスト比を7:1(大きなテキスト、つまり24px以上または18.66px以上の太字では4.5:1)と比べてください。
満たす場合:サイズに応じた基準値にコントラスト比が達しています。
満たさない場合:サイズに応じた基準値をコントラスト比が下回るため、WCAG 1.4.6を満たしません。
PLACEHOLDER_BELOW_THRESHOLD
- レポートに示されたフィールドを見つけ、中身を空にしてプレースホルダーが表示されるようにしてください。
- [Styles]ペインで、ページのCSSが::placeholderの色やopacity、またはフィールドの背景を指定しているか確認してください。
- ブラウザーの開発者ツールのカラーピッカー、またはスポイトで色を取得したコントラスト計算ツールを使い、フィールドの背景に対してプレースホルダーのテキストを測定し、7:1(大きなテキスト、つまり24px以上または18.66px以上の太字では4.5:1)と比べてください。
- プレースホルダーが単なる例ではなく、フィールドの入力に必要な情報(形式や指示)を含んでいるか確認してください。
満たす場合:プレースホルダーが7:1(大きなテキストなら4.5:1)に達しているか、すべてブラウザー自身の既定の色で描画されています。
満たさない場合:ページがプレースホルダーまたはフィールドの色を指定しており、コントラスト比が基準値を下回るため、WCAG 1.4.6を満たしません。
SYMBOLIC_CHARACTER_BELOW_THRESHOLD
- レポートに示された文字(×、☰、›、アイコンフォントのグリフなど)を見つけてください。
- それが読むためのテキスト(単語の一部、数字)か、閉じるやメニューの記号のように操作を表すアイコンかを判断してください。
- テキストであれば、ブラウザーの開発者ツールのカラーピッカー、またはスポイトで色を取得したコントラスト計算ツールを使って背景に対して測定し、7:1(大きなテキスト、つまり24px以上または18.66px以上の太字では4.5:1)と比べてください。
- アイコンの場合は、まず隣に同じ意味の見えるテキストがあるか確認してください(閉じる記号の横の「閉じる」という語など)。ある場合、そのアイコンは理解するための唯一の手段ではなく、3:1のコントラスト比は必要ありません。
- そうでない場合は、アイコンを背景に対して測定し、3:1と比べてください(WCAG 1.4.11)。
満たす場合:テキストで基準のコントラスト比に達しているか、3:1に達しているか、隣の見えるテキストが同じ意味を示しているアイコンです。
満たさない場合:7:1未満のテキストでWCAG 1.4.6を満たさないか、意味や機能を知る唯一の見える手段である3:1未満のアイコンでWCAG 1.4.11を満たしません。