色のコントラストチェック
前景色と背景色のコントラスト比をチェック。WCAG準拠の確認に。
▶このツールについて
テキストの可読性は、前景色と背景色のコントラスト比に大きく依存します。WCAG 2.1では、通常テキストで4.5:1以上、大きなテキストで3:1以上のコントラスト比がAA基準として推奨されています。AAA基準ではさらに厳しい数値が求められます。デザインの段階でコントラストを確認することで、アクセシビリティに配慮したUIを実現できます。このツールでは、前景色と背景色を選択するだけで、コントラスト比とWCAG 2.1のAA/AAA適合状況を即座に確認できます。
Aa 123 見本
コントラスト比 —
WCAG AA（通常テキスト 4.5:1） —
WCAG AA（大きなテキスト 3:1） —
WCAG AAA（通常テキスト 7:1） —
使い方
前景色と背景色を選択すると、コントラスト比が表示されます。WCAG 2.1のAA/AAA基準（通常テキスト・大きなテキスト）の適合状況を確認できます。
いつ使うか
アクセシビリティ対応、UIの色選定、テキストの可読性確保、WCAG準拠の確認に。
使用例
白(#fff) on 黒(#000) = 21:1、グレー(#666) on 白(#fff) = 5.74:1。