テキストとUIについてWCAG 2.2のAA・AAA判定付きでコントラスト比を表示 HEX、RGB、HSL、OKLCH、CSS色名とカラーピッカーに対応半透明の色はブラウザと同じように合成して計算見出し、本文、小さな文字、ボタンのライブプレビュー明度だけを調整して基準を満たす最も近い色を提案

カラーコントラストチェッカー - WCAG AA・AAA準拠を確認

コントラスト比とは? なぜ重要なのか

コントラスト比は2色の知覚的な明るさの差を表し、1:1(同じ色)から21:1(白地に黒)まであります。WCAG 2.2はレベルAAで通常テキストに4.5:1以上、大きいテキストとUI要素に3:1以上を求め、レベルAAAでは7:1と4.5:1です。男性の約12人に1人は色覚に特性があり、晴天の屋外でスマートフォンを読む人も多いため、コントラストの低い文字は実際のユーザーを排除してしまいます。欧州アクセシビリティ法やADAなどの法律はWCAG AAを参照しており、多くのサイトでコントラストは法的な要件にもなっています。

機能

• テキストとUIについてWCAG 2.2のAA・AAA判定付きでコントラスト比を表示
• HEX、RGB、HSL、OKLCH、CSS色名とカラーピッカーに対応
• 半透明の色はブラウザと同じように合成して計算
• 見出し、本文、小さな文字、ボタンのライブプレビュー
• 明度だけを調整して基準を満たす最も近い色を提案

即時かつプライベート

計算はすべてブラウザ内で行われます。公開前のデザインの色がどこかに送信されることはありません。

WCAG 2.2の計算式、100%クライアント側。

コントラスト比チェッカーの使い方

1
文字色と背景色を入力します。任意のCSSカラー(#1e293b、rgb()、hsl()、oklch()、色名)を入力するか、カラーピッカーを使います。
2
コントラスト比を確認します。結果は切り上げずに切り捨てで表示するため、4.49:1が合格と表示されることはありません。
3
WCAGの5つの判定を確認します。通常・大きいテキストのAAとAAA、そして入力欄の枠線、アイコン、フォーカスリングなどUI部品の3:1です。
4
不合格なら、色相はそのまま明度を調整した提案色を確認して「この色を使う」を押すか、色を入れ替えて逆の組み合わせも試します。

活用例

グレーのプレースホルダー

Tailwindのgray-400(#9ca3af)を白背景に使うと2.5:1しかなくAA不合格です。gray-500(#6b7280)なら4.8:1で本文にも使えます。

ボタンのブランドカラー

明るいブランドブルーはボタンの大きな文字(3:1)では合格でも、小さな文字では不合格になることがあります。両方を確認するか、白文字が4.5:1を超えるまでボタンの背景を暗くします。

ダークモードの配色

純白と純黒(21:1)はまぶしく感じることがあります。#0f172a上の#e2e8f0のような柔らかい組み合わせでも約14:1でAAAを超えます。

フォームの枠線とアイコン

WCAG 1.4.11は入力欄の境界や意味のあるアイコンに3:1を求めています。白背景に#e5e7ebの枠線ではかなり不足し、入力欄が見つけにくくなります。

よくある質問

「大きいテキスト」とは?+

WCAGでは、18pt(24px)以上の通常の太さ、または14pt(約18.66px)以上の太字です。線が太く読みやすいため、AAでは3:1で足ります。

AAとAAAのどちらが必要?+

AAがほとんどのWebサイトやアプリの標準的な法的目標です。AAAはより厳しく、長文の読み物、行政サービス、ロービジョンの利用者が多い場合に推奨されます。

ロゴや無効なボタンも対象?+

対象外です。WCAGはロゴ、装飾画像、無効(disabled)なコントロールを除外しています。プレースホルダー、リンク、フォーカス表示は対象です。

APCAやWCAG 3は?+

APCAは将来のWCAG 3で提案されている新しいコントラストモデルです。まだ草案のため、現在の法律や監査ではWCAG 2.2のコントラスト比が要件です。