テキストが色のコントラスト基準に準拠していることを確認する

次のセクションでは、カラーコントラスト チェッカーについて知っておくべきことをすべて、次の点を含めて説明します。

1. 適切な色のコントラスト比の重要性を理解する
2. 色のコントラスト比を検証する
3. 色のコントラスト比を修正する

完全なアクセシビリティ コースに登録します。 

適切な色のコントラスト比の重要性を理解する

テキストと背景の間の適切な色のコントラストにより、すべてのユーザーにとってのサイトのユーザー エクスペリエンス、アクセシビリティ、読みやすさが向上し、特に視覚障害のあるユーザーに役立ちます。 WCAGは推奨比率を提供している テキスト サイズに基づいて最適なコントラストを実現します。コントラストは 2 つの色の明るさ (または輝度) の差を表し、1:1 (例: 白い背景に白いテキスト) から 21:1 (例: 白い背景に黒いテキスト) までの範囲になります。

AA のカラーコントラストガイドライン (最小)

• テキストとビジュアルの比率は4.5:1にする必要があります
• 十分な文字数（18ポイントまたは14ポイントの太字）の場合は、3:1の比率が必要です。

AAA のカラーコントラストガイドライン (拡張)

• テキストとビジュアルの比率は7:1にする必要があります
• 十分なテキスト（18ポイントまたは14ポイントの太字）には4.5:1の比率が必要です。

注記： WCAG コントラスト比ガイドラインは画像 (ロゴを含む) には直接影響しませんが、目立つテキストを含む画像では 4.5:1 の比率に従うことが推奨されます。ただし、テキストの画像は視覚障害のある訪問者にとって問題を引き起こし、理解できないことが多いことに留意してください。可能な場合は、様式化されたテキストを選択してください。

色のコントラスト比を検証する

コントラスト比の適切さは、前景色 (テキスト) と背景色 (テキストが表示される単色の背景)、およびフォント サイズと太さに依存します。Webflow に組み込まれているカラー コントラスト チェッカーを使用して、サイト上のテキストのコントラスト比を評価し、必要に応じて調整します。これは、テキストのコントラスト比だけでなく、対応する WCAG レベル評価も表示する Webflow のカラー ピッカーから直接実行できます。 

注記： カラーコントラスト チェッカーは、テキスト要素と画像要素のコントラストを評価しません (例: テキストが画像の上にある場合)。

テキストのコントラスト比を評価するには:

1. を選択 テキスト要素 評価したい
2. アクセス スタイルパネル > タイポグラフィ
3. クリックしてください 色見本 テキスト要素のカラーピッカーを表示する
4. レビュー コントラスト比 カラーピッカー内のセクションで、テキストの WCAG レベル評価 (例: 不合格、AA、AAA) を確認します。

WCAG レベルの評価は、背景色とフォント サイズ、太さ、色によって決定され、疑問符アイコンをクリックすると表示される説明テキストで明確にされます。(このコントラスト比セグメントは、テキスト要素のタイポグラフィの色を変更するときにのみ表示されます。)

テキスト要素のコントラスト比の説明テキストにアクセスするには: 

1. を選択 テキスト要素 興味を持っている
2. 開く スタイルパネル > タイポグラフィ
3. クリックしてください 色見本 テキスト要素のカラーピッカーをアクティブにする
4. を押す 「疑問符」アイコン コントラスト比に関連する 

色のコントラスト比を修正する

テキストが WCAG コントラスト比評価で不合格 (不合格) と分類された場合は、テキストの色をより高いコントラストのオプションに変更することを検討してください。テキストの色を変更すると、AA (合格の最低基準) または AAA (さらに望ましい) の評価が表示されます。