色のコントラストを確認

この比率は、WCAG コントラスト公式を使用して、前景色と背景色の相対的な輝度を比較します。スケールは、同一の輝度の 1:1 から最も強い白黒の差の 21:1 までです。計算では入力された色の値が使用されるため、透明度、グラデーション、背景イメージ、影、アンチエイリアシング、表示条件、またはインタラクティブ状態で表示される別の色は自動的には考慮されません。通常、ホバー、フォーカス、アクティブ、無効、および訪問済みの状態が異なる場合は、実際にレンダリングされた色をテストします。

通常のテキストの場合、WCAG AA は最小比率 4.5:1 を使用し、AAA は 7:1 を使用します。大きくて十分に太字の文字は区別しやすいため、大きなテキストでは低いしきい値が使用されます (AA の場合は 3:1、AAA の場合は 4.5:1)。テキストが大きいかどうかは、デザイン ラベルだけでなく、レンダリングされたサイズと太さによって決まります。したがって、ペアは大きな見出しには合格しても、本文には不合格となる可能性があります。実際のタイポグラフィと適合ターゲットに一致する要件を確認してください。

はい。テキストのコントラストは、色のアクセシビリティの一部にすぎません。ユーザー インターフェイス コントロール、コンポーネントの状態、グラフィック オブジェクト、およびキーボード フォーカス インジケーターを識別するために必要な視覚情報には、通常、WCAG 非テキスト コントラスト ガイダンスに基づいて、隣接する色に対して少なくとも 3:1 のコントラストが必要です。装飾要素と非アクティブなコントロールには異なる考慮事項があります。コンテキスト内の境界線、アイコン、チャート、選択された状態、検証メッセージ、およびフォーカスのアウトラインをテストします。 AA を渡すテキスト ペアは、同じ画面上のすべてのインタラクティブまたはグラフィカル要素にアクセスできることを証明するものではありません。

テキストまたは重要なグラフィックが表示されるポイントに効果的な前景色と背景色を入力します。半透明のレイヤーはその背後にあるものと混ざり合い、グラデーションや写真によって同じ要素全体に異なるコントラスト比が作成されます。最も弱い関連領域をサンプリングし、その他の可能性のある位置と反応する作物をテストします。コントラストがシャドウ、アウトライン、またはオーバーレイに依存する場合は、手動レビューに実際のレンダリング効果を含めます。基礎となる画像が変化する可能性がある場合は、重要なテキストの背後に安定した無地の裏地を使用することを好みます。

いいえ、コントラストは測定可能な要件の 1 つです。アクセシブルなデザインには、読みやすい文字、十分な間隔、意味構造、ラベル、キーボード操作、目に見えるフォーカス、意味のある代替手段、使用可能なズームとリフロー、制御されたモーション、および色のみに依存しない指示も必要です。色のペアは数学的に合格する可能性がありますが、細いフォント、小さいサイズ、まぶしさ、色覚の違い、または密集したレイアウトでは依然として困難です。この結果を広範なレビューにおける 1 つのチェックとして使用し、代表的なコンテンツと状態を使用して実際のインターフェイスをテストします。