コントラストチェッカー

使い方

1. 左側のカラー入力を使用して前景色を入力またはピックします。
2. 右側のカラー入力を使用して背景色を入力またはピックします。
3. コントラスト比と WCAG 2.1 のパス/フェイルバッジを読み、通常のテキスト (AA には 4.5:1 が必要)、大きなテキスト (AA には 3:1 が必要)、UI コンポーネント (3:1) を確認します。
4. スワップボタンをクリックして色を逆にし、両方向を検証します。

例

• 前景色 #767676、背景色 #ffffff は、4.48:1 の比率を生成します。これは通常のテキストでは AA に失敗しますが、大きなテキストでは合格します。
• 前景色 #000000、背景色 #ffffff は 21:1 を生成し、AAA を含むすべての WCAG 2.1 レベルに合格します。