本文の配色を確認
文字色と背景色の比率を計算し、通常テキストのAA・AAA基準を満たすか確認できます。
WCAGカラーコントラスト確認
WCAGカラーコントラスト確認
前景色と背景色のHEXからWCAG 2.xのコントラスト比を計算し、通常・大きな文字のAA・AAA適合を確認します。
主な機能
- 3桁または6桁のHEX前景色・背景色とネイティブカラーピッカーに対応します。
- WCAG 2.xのsRGB相対輝度を使い、1:1〜21:1の比率を計算します。
- 通常の文字をAA 4.5:1、AAA 7:1の基準で判定します。
- 大きな文字をAA 3:1、AAA 4.5:1の基準で判定し、色をライブ表示します。
- 前景色と背景色を入れ替え、各HEX値をコピーできます。
使い方
- 文字の前景色と背景色をHEXで入力します。
- 通常・大きな文字の比率とAA・AAA判定を確認します。
- 必要に応じて色を入れ替えるか修正し、再度確認します。
活用例
デザイントークン候補を比較
前景色と背景色を入れ替えたりHEX値を調整したりしながら、基準を満たす配色候補を探せます。
プライバシー
色変換とコントラスト計算はブラウザ内で処理されます。
動作要件
WCAG 2.xの色コントラストのみを確認します。フォントサイズ、太さ、状態の伝達、全体的な使いやすさの確認に代わるものではありません。
よくある質問
- 大きな文字と通常の文字では基準が違いますか？
- はい。通常の文字はAA 4.5:1・AAA 7:1、大きな文字はAA 3:1・AAA 4.5:1で個別に表示します。
- #fffのような3桁HEXも入力できますか？
- はい。3桁と6桁のHEXを正規化してからコントラスト比を計算します。