カラーコントラストチェッカーツール
テキスト色と背景色のコントラスト比をWCAG 2.1とAPCAで判定。色覚シミュレーション・代替色提案も搭載。
12.63:1
Lc 97.4
大きいテキスト (24px) - 見出しテキスト
通常テキスト (16px) - あいうえお The quick brown fox
小さいテキスト (12px) - 補足テキスト
WCAG 2.1 判定結果
通常テキスト AA (4.5:1)
PASS
通常テキスト AAA (7:1)
PASS
大きいテキスト AA (3:1)
PASS
大きいテキスト AAA (4.5:1)
PASS
UIコンポーネント (3:1)
PASS
APCA (WCAG 3.0 候補)
97.4
Lc値
流暢な読みやすさ推奨Lc 90+
本文テキスト推奨Lc 75+
見出しテキスト推奨Lc 60+
大きいテキスト推奨Lc 45+
非テキスト要素推奨Lc 30+
色覚シミュレーション
使い方
1
色を入力
テキスト色と背景色をカラーピッカーまたはHEXコードで入力します。
2
判定結果を確認
WCAG 2.1のAA/AAAレベルとAPCA値がリアルタイムで表示されます。
3
色覚シミュレーションで確認
6種類の色覚タイプでの見え方とコントラスト比を確認できます。
カラーコントラストチェッカーとは
Webサイトのアクセシビリティを高めるためのツールです。テキスト色と背景色のコントラスト比をWCAG 2.1（AA/AAA）とAPCA（WCAG 3.0候補）の両方で同時に判定できます。すべての処理はブラウザ内で完結し、入力した色情報がサーバーに送信されることはありません。
機能・特徴
- WCAG 2.1 & APCA同時判定現行規格と次世代規格の両方でコントラスト比を同時にチェックできます。
- 色覚シミュレーションP型・D型・T型など6種類の色覚タイプでの見え方をシミュレートします。
- 代替色提案コントラスト不足の場合、WCAG AA基準を満たす代替色を自動で提案します。
- プライバシー保護すべての処理はブラウザ内で完結。色情報はサーバーに送信されません。
活用シーン
- Webサイト・アプリのアクセシビリティ検証
- デザインカラーパレットのコントラスト確認
- 色覚多様性への配慮確認
- JIS X 8341-3:2016（日本工業規格）への対応確認
- クライアントへのアクセシビリティレポート作成
よくある質問
コントラストチェッカーは無料で使えますか？
はい、完全無料でご利用いただけます。会員登録も不要で、ブラウザを開くだけですぐにお使いいただけます。
WCAG 2.1とAPCAの違いは何ですか？
WCAG 2.1は現行のW3C勧告で、単純な輝度比でコントラストを評価します。APCAはWCAG 3.0で採用が検討されている新しいアルゴリズムで、テキストの色・サイズ・太さと人間の知覚特性を考慮したより正確な判定が可能です。
AA/AAAレベルの違いは何ですか？
AAは最低限のアクセシビリティ基準（通常テキスト4.5:1以上）で、多くのWebサイトが目標にすべき水準です。AAAはより厳格な基準（7:1以上）で、高いアクセシビリティが求められるサイトに推奨されます。
色覚シミュレーションとは何ですか？
色覚の多様性を持つ方（P型：赤が見えにくい、D型：緑が見えにくい、T型：青が見えにくい）の見え方をシミュレートする機能です。色覚タイプごとのコントラスト比も表示され、すべてのユーザーにとって十分なコントラストが確保されているか確認できます。
入力した色は保存されますか？
いいえ、入力された色情報はサーバーに送信・保存されません。すべての計算処理はお使いのブラウザ内で完結します。