このツールでできること
前景色と背景色を客観的な文字コントラスト基準で検査し、一般的な色形式も同時に確認します。
使い方
- 前景色と背景色のHEX値を入力するか、カラーピッカーで選びます。
- コントラスト比と通常・大きい文字のAA・AAAの4項目を計算します。
- 計算後の見本を確認し、比率・判定とHEX・RGB・HSL値をコピーします。
計算式と処理方法
sRGBチャンネルを相対輝度へ線形化します。比率 =（明るい輝度 + 0.05）÷（暗い輝度 + 0.05）で、しきい値の判定前には丸めません。
使用例
黒と白は21:1で4項目すべてに合格します。#008580と#FFFFFFは約4.499954:1で、4.5:1未満のため通常文字のAAには不合格です。
活用例
- Webサイトの文字色確認
- HEXからRGB・HSLへの変換
- 公開前のデザイントークン確認
制限と注意点
不透明な2つの単色だけを検査します。グラデーション、画像、透明度、実際の文字描画、フォーカス表示は測定しません。文字色のコントラスト結果であり、非テキストのコントラストや全体のアクセシビリティ検査ではありません。
よくある質問
どの基準を使いますか？
WCAG 2.2では通常文字はAAで4.5:1以上、AAAで7:1以上、大きい文字はそれぞれ3:1以上、4.5:1以上です。文字サイズは利用者による拡大前の提供時の値で確認します。
合格すればページ全体がアクセシブルですか？
いいえ。文字色のコントラストだけを検査します。構造、キーボード操作、ラベル、非テキストのコントラスト、フォーカスは別に確認する必要があります。