コントラストチェッカー
前景色と背景色を選ぶと、正確なコントラスト比、WCAG の合否バッジ、通常テキストと大きなテキストのプレビューが表示されます。
無料 ブラウザ内で処理 登録不要
18.88: 1コントラスト比
AA 通常テキスト: 合格 AA 大きなテキスト: 合格 AAA 通常テキスト: 合格 AAA 大きなテキスト: 合格
プレビュー
プレビュー
素早い茶色の狐が、のんびりした犬を飛び越えます。
プリセット
WCAG AA では、通常テキストは 4.5:1、大きなテキストは 3:1 以上が必要です。
使い方
1
色を設定
文字色と背景色を選ぶか、HEX 値を貼り付けます。
2
比率を確認
コントラスト比と、どの WCAG レベルを満たすかが表示されます。
3
合格するまで調整
色を変えるとバッジがリアルタイムで更新されます。
このツールの特長
WCAG AA と AAA
通常テキストと大きなテキストの基準を別々に判定します。
ライブプレビュー
本文と大きな見出しで、その組み合わせがどう見えるか確認できます。
正確な比率
WCAG の相対輝度の計算式を使用しています。
よくある質問
必要な比率はどのくらい？
WCAG AA は通常テキスト 4.5:1、大きなテキスト 3:1 です。AAA はそれぞれ 7:1 と 4.5:1 になります。
大きなテキストの定義は？
18pt（24px）以上の通常文字、または 14pt（18.66px）以上の太字です。
テキスト以外のコントラストも判定しますか？
いいえ。このツールはテキストのコントラストを判定します。UI 部品には別途 3:1 の基準があります。
他のツールと比率が違うのはなぜ？
丸めの違いによるものです。このツールは sRGB チャンネルで WCAG の相対輝度式を使って計算しています。
データはアップロードされますか？
いいえ。色の計算はブラウザ内で行われます。
関連ツール
色とデザイン CSS グラデーション生成 線形・放射・円錐の CSS グラデーションを、色の位置を調整しながら作成し、CSS または Tailwind の値をコピーできます。無料で、すべてブラウザ内で動作します。 色とデザイン カラーコード変換 色を HEX、RGB、HSL、HSV の間で変換し、カラーピッカーから選ぶだけで CSS やデザインツールでそのまま使える値をコピーできます。 画像ツール 画像圧縮ツール JPG、PNG、WebP の画像をブラウザ内で圧縮します。品質と幅を調整し、元画像とサイズを比較して、アップロードせずにダウンロードできます。 画像ツール ファビコン生成ツール 1枚の画像からファビコン一式を生成します。正方形にトリミングし、16〜512px の PNG、Apple Touch Icon、Web マニフェスト、HTML スニペットを取得できます。 開発ツール Base64 エンコード・デコード テキストを Base64 に変換したり、Base64 をテキストに戻したりできます。UTF-8 と URL セーフに対応し、すべてブラウザ内で完結します。 テキストツール ケース変換ツール テキストを大文字、小文字、タイトルケース、文頭のみ大文字、camelCase、PascalCase、snake_case、kebab-case に即座に変換できます。
最終更新: