コントラスト比チェッカー

コントラスト比チェッカーについて

文字と背景の明るさの差を計算し、WCAG 2.1の達成基準に照らしてアクセシビリティを確認します。

主な機能

• 正確な比率: sRGBから相対輝度を計算します。
• AA/AAA判定: 通常文字と大きな文字を分けて判定します。
• サンプル表示: 実際の色の組み合わせを確認できます。

使い方

1. 前景色と背景色を指定します。
2. 結果の比率と適合レベルを確認します。
3. 必要なら色を調整して再確認します。

プライバシー

色の計算はブラウザ内で完結し、データは送信されません。

判定結果の読み方

コントラスト比は1:1から21:1の範囲で、数字が大きいほど文字と背景を区別しやすくなります。通常サイズの本文はAAで4.5:1以上、大きな文字は3:1以上が目安です。見出しや大きな文字でも、細い書体や低い表示品質では読みづらくなるため、サンプル表示も確認してください。

実務での確認ポイント

テキスト色だけでなく、リンク、無効状態、フォームの境界線、ダークモードの組み合わせも個別に確認します。色だけに意味を持たせず、ラベルやアイコンなど別の手がかりを併用すると、より多くの利用者に伝わります。