カラーコントラストチェッカー
前景色と背景色の WCAG コントラスト比をブラウザ内で確認し、通常文字と大きな文字の AA / AAA を判定します。
カラーコントラストチェッカー
カラーコントラストチェッカーは、前景色と背景色の WCAG コントラスト比をブラウザ内でローカルに確認し、1:1 から 21:1 の比率と通常文字 / 大きな文字の AA / AAA 判定を表示します。
使い方
- 前景色と背景色を HEX、RGB、HSL、一般的な CSS 色名で入力します。
- リアルタイムのコントラスト比と AA / AAA 判定を確認します。
- プレビューで実際の文字の読みやすさを確認します。
- レポートをコピーしてデザイン連携、フロントエンド確認、アクセシビリティ記録に使います。
特徴
- WCAG コントラストをローカル計算
- 通常文字と大きな文字の AA / AAA を判定
- 透明色は白背景で合成してから計算
利用する理由
- 本文、ボタン、リンク、アイコン色の読みやすさをすばやく検証できる
- デザインと実装のアクセシビリティ差分を減らせる
- データを送信せずブラウザ内で確認できる