無料WCAG カラーコントラストチェッカー
2 つの色がアクセシビリティに関する WCAG AA および AAA コントラスト基準を満たしているかどうかを確認します。コントラストが低すぎる場合は、複数のテキスト サイズでライブ プレビューが自動提案されます。
大見出しテキスト
本文テキスト中 (18px) — 読み物・コンテンツ用。
本文テキスト標準 (16px) — 段落用。
本文テキスト小 (14px) — キャプション・メタデータ用。
コントラスト比
4.5:1 必要 · 現在の比率 14.63:1
3.0:1 必要 · 現在の比率 14.63:1
7.0:1 必要 · 現在の比率 14.63:1
4.5:1 必要 · 現在の比率 14.63:1
3.0:1 必要 · 現在の比率 14.63:1
クイックプリセット
WCAG 2.1 コントラストガイドラインに基づきます。大テキスト = 18pt (24px) 標準または 14pt (18.66px) 太字。HEX コードは双方向で更新されます — HEX を入力またはカラーピッカーで選択すると両方の入力が同期します。
主な用途
- WCAG準拠のウェブページを監査サイトのテキスト色がアクセシビリティのWCAG AAまたはAAA対比基準を満たしていることを確認します。
- ブランドカラーの組み合わせを確認ブランドカラーパレットペアリングをテストして、アクセス可能なUIデザインに適していることを確認します。
- ダークモードカラーパレットをテストライトテキストは暗い背景でも対比に失敗することがあります。ダークモードパレットペアリングをここで確認してください。
- 印刷物用のカラーペアリングポスター、標識、印刷物も読みやすい対比が必要です。特に年配の視聴者向けです。
- アクセス可能なボタン色をデザインするCTA、アクションボタン、リンクが背景に対してWCAGを満たしていることを確認します。
使い方
コントラストのチェックはWCAG 2.1の相対輝度アルゴリズムを使ってブラウザ内で完全に行われます — ライブラリもサーバーも不要で、仕様どおりに手書きされた計算のみです。すべての結果は入力または色を選ぶたびにリアルタイムで更新されます。
- 116進数の入力と正規化3桁（#abc）と6桁（#aabbcc）どちらの16進値も受け付けられ、完全なRGBトリプルに正規化されます。無効な入力は黒に暗黙的にデフォルトするのではなく即座に拒否されるため、誤解を招く合格結果の代わりに赤い枠が表示されます。
- 2WCAG輝度計算各色はWCAG 2.1の式を使って相対輝度に変換されます：sRGBのチャンネル値は区分的ガンマ補正で線形化され（0.03928未満は12.92で割り、それ以上は2.4乗）、その後0.2126R + 0.7152G + 0.0722Bとして重み付けされます。
- 3コントラスト比と適合性チェックコントラスト比は(明るい方 + 0.05) / (暗い方 + 0.05)として計算され、5つのWCAG閾値すべて — AA通常テキスト（4.5:1）、AA大きいテキスト（3:1）、AAA通常テキスト（7:1）、AAA大きいテキスト（4.5:1）、UIコンポーネント（3:1）— と照合されます。結果はキーストロークごとに更新されます。
- 4色相を保つ修正提案ペアがWCAG AAに合格しない場合、ツールはHSLの明度空間を探索します — 元の明度から両方向に外側にステップしながら — 同じ色相と彩度を保ちつつ4.5:1に合格する各色の最も近いバリエーションを見つけます。EyeDropper API（Chromium）を使って画面から任意の色を直接サンプリングすることもできます。
関連ツール
色覚異常シミュレーター
色覚異常のある人にとってデザインがどのように見えるかを確認できます。1型2色覚（プロタノピア）、2型2色覚（デューテラノピア）、3型2色覚（トリタノピア）、全色盲、および軽度の異常をシミュレートします。
自分の画面解像度は？
CSS および実際のピクセルでの画面解像度、ウィンドウサイズ、ピクセル比、色深度、HDR、タッチサポート、リフレッシュレートを表示し、すべてをコピーします。
ドット抜けテスト
全画面の黒、白、赤、緑、青、グレーを使用して、画面のドット抜けや常時点灯をチェックします。さらに、オプションで常時点灯修正機能も利用できます。