カラーコントラストチェッカー - WCAG 2.1準拠

コントラストチェッカーとは？

コントラストチェッカーは、前景色と背景色のコントラスト比をWCAG 2.1（Web Content Accessibility Guidelines）の基準で計算・判定するツールです。アクセシビリティを確保するために、テキストの色と背景色の組み合わせが十分なコントラスト比を持つかを検証できます。

関連: カラーコード変換 · パレット生成

使い方

1. 前景色（テキスト色）をカラーピッカーまたはHEX入力で指定します
2. 背景色をカラーピッカーまたはHEX入力で指定します
3. コントラスト比とWCAG AA/AAA判定結果を確認します
4. テキストプレビューで実際の見え方を確認します

よくある質問

WCAG AAとAAAの違いは何ですか？

AAは最低基準（通常テキスト4.5:1、大テキスト3:1）、AAAは強化基準（通常テキスト7:1、大テキスト4.5:1）です。

大テキストの基準は何ですか？

18px以上、または14px以上の太字テキストが大テキストとして扱われます。

どのように使いますか？

前景色（テキスト色）と背景色をカラーピッカーまたはHEX入力で指定するだけで、コントラスト比とWCAG AA/AAA判定が即座に表示されます。

データはサーバーに送信されますか？

いいえ。処理はブラウザ上で完結し、データはサーバーに送信されません。

コントラスト比が基準を満たさない場合はどうすればよいですか？

テキストを暗く・背景を明るく（またはその逆）して差を広げるか、テキストサイズを大きくすると判定が改善されやすくなります。

関連ツール