🧰 UtlKit

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

WCAG準拠のカラーコントラスト比率をチェック。

プレビューテキスト
The quick brown fox jumps over the lazy dog.
Aa Bb Cc
コントラスト比率
21.00:1
合格
WCAG AA 標準テキスト (min 4.5:1)
合格
WCAG AA 大文字 (min 3:1)
合格
WCAG AAA 標準テキスト (min 7:1)
合格
WCAG AAA 大文字 (min 4.5:1)
🐛

問題を報告

バグを見つけましたか?提案がありますか?このツールの改善にご協力ください。

📊 データサマリー(自動入力)

ツール: contrast-checker · /tools/contrast-checker/

foreground: #000000

background: #FFFFFF

これはどんなツールですか?

WCAG カラーコントラストチェッカーは、アクセシビリティ準拠のために前景色と背景色のコントラスト比を評価します。WCAG 2.1/2.2 基準(AA および AAA レベル)に対してチェックし、視覚障害のあるユーザーを含むすべてのユーザーがテキストを読めることを確保します。

使い方

  1. 1

    前景色を設定

    テキストの色を選択または入力します。

  2. 2

    背景色を設定

    背景色を選択または入力します。

  3. 3

    結果を確認

    コントラスト比と WCAG AA/AAA の合格/不合格ステータスを表示します。

よくある質問

どのコントラスト比が必要ですか?

WCAG 2.1 の AA レベルでは、通常テキストに 4.5:1、大号テキストに 3:1(18px 以上の通常、または 14px 以上の太字)が必要です。AAA レベルでは、通常テキストに 7:1、大号テキストに 4.5:1 が必要です。

なぜカラーコントラストは重要なのですか?

不十分なコントラストは、視力の低下があるユーザー、色盲のユーザー、明るい画面でのテキストの読解を困難にします。良いコントラストはすべての人の読解性を向上させ、法的なアクセシビリティ準拠を確保します。

結果が正しくない場合はどうすればよいですか?

入力値を再確認してください。ツールは標準的な式を使用していますが、境界ケースでは手動での検証が必要な場合があります。