使い方
- テキスト（前景色）と背景色をHEX、rgb()、hsl()などのCSS形式で入力するか、カラーピッカーで選択します。
- コントラスト比と、各WCAG要件の合否を確認します。
- 要件を満たさない場合は目標を選び、提案された色を適用します。色相はそのままに、明度だけを変更します。
- 「入れ替え」を使うと、明るい文字を暗いボタンに配置する場合など、色の組み合わせを逆にして確認できます。
仕組み
コントラスト比はWCAG 2.2の定義に基づいています。各色の相対輝度をsRGBチャンネルから算出し、（明るい色 + 0.05）÷（暗い色 + 0.05）で求めます。比率は、同一色の1:1から白地に黒文字の21:1までの範囲です。
チェック対象の要件：成功基準1.4.3（AA）では通常のテキストに4.5:1、大きなテキストに3:1が必要です。1.4.6（AAA）では、それぞれ7:1と4.5:1が必要です。1.4.11では、入力欄の枠線やアイコンなど、ユーザーインターフェースの部品や意味のあるグラフィックに3:1が必要です。大きなテキストとは、通常の太さで24px以上、または太字で約18.66px以上のテキストです。WCAGでは切り上げは認められていないため、4.49:1は基準に近くてもAAに適合しません。ここに表示される比率は四捨五入ではなく切り捨てです。
提案色はテキスト色の色相と彩度をOKLCHで維持し、目標値を満たす最も近い明度を、より暗い方向または明るい方向に探します。コントラスト比は読みやすさを決める要素の一つです。フォントの太さやサイズ、色覚の違いも影響します。WCAG 2.2は、アクセシビリティ関連の法令で広く参照されている、現在のW3C勧告です。
使用例
基準にわずかに届かないグレーの文字
白地に#777777の文字を置いた場合、コントラスト比は4.48:1です。大きなテキストやUIコンポーネントには適合しますが、通常のテキストのAAには適合しません。基準を満たす最も近いグレーは約#767676で、4.54:1になります。
ブランドカラーのボタンに白い文字
#ff8800の背景に白い文字を置いた場合、コントラスト比は約2.4:1で、大きなテキストの基準である3:1にも届きません。一般的な対処法は、オレンジを暗くするか、代わりに暗い色の文字を使うことです。提案では、文字色をどの程度暗くする必要があるかを確認できます。
フォーム入力欄の枠線をチェック
白地に薄いグレーの枠線（#cccccc）を置いた場合、コントラスト比は約1.6:1です。基準1.4.11では、入力欄を識別する枠線に3:1が必要なため、#949494程度か、それより暗い色が必要です。
よくある質問
WCAG AAに必要なコントラスト比は？
通常の本文テキストは4.5:1、大きなテキスト（24px、または太字で18.66px）は3:1、UIコンポーネントや意味のあるグラフィックは3:1が必要です。AAAでは、テキストは7:1、大きなテキストは4.5:1が必要です。
ロゴや無効状態のボタンのテキストも基準を満たす必要がありますか？
いいえ。WCAGでは、ロゴやブランド名のテキスト、装飾のみを目的とするテキスト、無効（操作不可）状態のユーザーインターフェース部品内のテキストは適用対象外です。
他のチェッカーと結果が少し違うのはなぜですか？
ツールによっては、比率を小数第1位まで表示したり、切り上げたりします。WCAGでは正確な値を比較するため、このツールでは小数第2位まで切り捨てて表示します。アルファ値を含む色を入力した場合も、わずかな差が生じることがあります。
新しいAPCAコントラスト方式について教えてください。
APCAは、将来のWCAGバージョン向けに提案されている別の方式です。WCAG 2.2には含まれていません。このツールではWCAG 2.2を測定しており、現在のアクセシビリティ基準もWCAG 2.2を参照しています。
プライバシー
色のチェックはブラウザー内で行われます。データがアップロードまたは保存されることはありません。