カラーコントラストチェッカー（WCAG）

文字色と背景色を選ぶと、WCAG 2.2のコントラスト比とAA・AAAの結果が同時に表示されます。基準に届かないときは、明度だけを変えて合格する最も近い色を提案します。Webやアプリの画面、発表資料の文字が読みやすいかを確かめるときに使います。

使い方

1. 「2色を調べる」で、「文字色」と「背景色」をカラーピッカーか、HEX、rgb()、hsl()の入力で設定します。
2. 「プレビューの文」に実際の文言を入力すると、通常の文字、大きな文字、太字、枠線とアイコンでの見え方を確認できます。
3. 「合格する最も近い色」で、「文字色を変える」または「背景色を変える」の横にある「適用」を押します。HEX値を押すとコピーされます。
4. 「パレットを調べる」で2〜12色を入力すると、すべての組み合わせの表と「基準に届く組み合わせ」のリストが表示されます。

計算方法と補足

• コントラスト比 = (L1 + 0.05) ÷ (L2 + 0.05)で、L1とL2は2色の相対輝度です。1:1から21:1までの範囲で、小数第2位で切り捨てます。
• 基準はWCAG 2.2の達成基準1.4.3（AA: 通常の文字4.5:1、大きな文字3:1）、1.4.6（AAA: 7:1と4.5:1）、1.4.11（UI部品3:1）に従います。大きな文字は24px以上、または太字で18.66px以上です。
• 提案する色はOKLCHで色相と彩度を保ち、明度だけを基準に届くまで動かします。どの明度でも届かない場合は、その旨を表示します。
• 最後に使った色、プレビューの文、パレットのリストはこのブラウザーにだけ保存されます。

よくある質問

コントラスト比4.5:1とはどういう意味ですか

明るい色の相対輝度に0.05を足した値が、暗い色の相対輝度に0.05を足した値の4.5倍であるという意味です。通常サイズの文字がAAに合格するための最低値です。

グレーの文字#777777は白い背景で合格しますか

コントラスト比は4.47:1で4.5:1にわずかに届かないため、大きな文字の基準だけに合格します。一段階暗い#767676なら4.54:1でAAに合格します。

AAとAAAの違いは何ですか

AAは通常の文字で4.5:1、AAAは7:1が必要です。多くのサイトはAAを目標にしており、AAAは長い本文に向いています。

ボタンの枠線やアイコンにもコントラストが必要ですか

必要です。WCAG 1.4.11では、意味を伝えるUI部品と図形は周囲と3:1以上のコントラストが求められます。「UI部品と図形」の行がその基準を調べます。