画像上のテキストのコントラスト

Silktide は、画像やグラデーションの上に直接配置され、テキストと背景のコントラストを自動的に測定できないテキストを検出します。このような箇所では、テキストが読みやすいかどうかを人の目で確認する必要があります。

重要な理由

ヒーローバナーや写真の背景は、実際の運用でコントラストの問題が最もよく発生する場所の一つです。写真には明るい部分と暗い部分があるため、画像のある部分では読めるテキストが別の部分では見えなくなることがあります。また、画面サイズが変わると、テキストの背後で画像が移動することもあります。弱視の人が最も大きな影響を受けますが、情報量の多い写真の上に置かれたテキストは、誰にとっても読みにくくなります。

通常のテキストと同じ法的な最低基準が適用されます。のでは、テキストの背後にある画像の領域を基準として、通常のテキストには少なくとも 4.5:1、大きなテキスト（18ポイント以上、または太字で14ポイント以上）には 3:1 のが必要です。

修正方法

フラグが付いた各要素を目視で確認します。テキストが重なる可能性のある画像のすべての部分に対して、必要な比率を満たしている必要があります。画像の位置が変わる可能性がある、別の画面サイズの場合も含まれます。
コントラストに不安がある場合は、画像とテキストの間に単色または半透明のオーバーレイを追加するか、テキストを画像の外へ完全に移動します。
テキストの背後に、より穏やかで均一な画像を選ぶ方法もあります。ただし、後からコンテンツ編集者が画像を差し替える可能性があるため、オーバーレイのほうが安全です。
テキストが明らかに読みやすい場合は、その検出結果をします。

Silktide によるテスト方法

ページ上で表示されているすべてのテキストを調べます。非表示のテキスト、SVG グラフィック内のテキスト、チェック対象から除外した要素は除外します。
背景が単色ではなく、画像またはグラデーションになっているテキストを特定します。単色の上にあるテキストは、代わりにテキストのコントラストによって自動的に測定されます。
サイズがゼロの背景画像や、リスト項目上の小さく、要素全体を覆わない背景画像（通常はカスタムの箇条書きアイコン）など、テキストに影響を与えない背景は除外します。
残ったテキストについて、テキストの色と関係する背景レイヤーを表示し、確認を求めます。画像には単一の色がないため、比率自体を自動的に計算することはできません。

トラブルシューティング

チェックで、明らかに読みやすいテキストにフラグが付く

これは想定された動作です。このチェックでは画像のコントラストを測定できないため、すべてのケースを表示する側に寄せています。問題ないものを確認して承認してください。承認した項目は、今後のスキャンでも承認済みのままになります。

自分の画面では画像に問題がないように見える

画面幅を小さくした場合と大きくした場合も確認してください。レスポンシブレイアウトでは、画像に対するテキストの位置が変わるため、デスクトップでは暗い部分に重なっていたテキストが、モバイルでは明るい部分に重なることがあります。