WCAG カラー コントラスト ガイド
AA と AAA のコントラスト要件、テキストと UI コンポーネントをテストする方法、失敗したペアを修正する方法を理解します。
FAQ
- ボタンにはどのような比率が必要ですか?
- UI コンポーネントとグラフィック オブジェクトは通常、隣接する色に対して少なくとも 3:1 を必要とします。ボタン内のテキストには、依然として 4.5:1 (AA) または大きなテキストの場合 3:1 が必要です。
WCAG コントラストの基本
WCAG 2.x では、テキストと背景の色の最小コントラスト比が定義されています。レベル AA は、法的および製品の共通のターゲットです。 AAA はより厳格であり、可能な場合は本文に推奨されます。
コントラストは色相ではなく相対輝度に基づいています。 2 つの色は異なって見えますが、明度が近すぎるとコントラストが失われます。
テストワークフロー
デザイン システムから前景色と背景色を選択します。コントラスト チェッカーに掛けます。通常のテキストのしきい値と大きいテキストのしきい値に注意してください。
デフォルトのボタンやリンクだけでなく、ホバー、フォーカス、および無効な状態をテストします。