01
このツールが役立つ場面
本文テキスト、ラベル、またはボタンの前景色と背景色を公開する前に使用します。2 つの HEX 色を入力すると、コントラスト比と通常文字用・大文字用の閾値結果がわかります。
カラーコントラストチェッカー
前景色と背景色の組み合わせから、通常テキストおよび大きなテキストのコントラストを確認します。
コントラスト比チェッカー
計画とリファレンス用のブラウザ側での結果です。
使用前に確認すべきこと
02
結果の生成方法
計算では sRGB チャネルを線形化し、相対輝度を導出した後、明るい方の輝度に 0.05 を加えた値を、暗い方の輝度に 0.05 を加えた値で割ります。得られた比率を 3:1、4.5:1、7:1 の文字閾値と比較します。
03
実例と解釈
前景 #111111 と背景 #FFFFFF を入力すると高い比率になります。小さな本文向けにはまず AA 通常を確認し、大きな見出しに使う組み合わせでは AA Large の結果も確認します。
04
対象範囲と制約
比率が条件を満たしてもアクセシビリティレビューが完了したことにはなりません。実際の文字サイズと太さ、インタラクティブ状態、画像上のテキスト、色だけで伝わる情報をテストしてください。
よくある質問
カラーコントラストチェッカーから別のアプリに色を移動するにはどうすればよいですか？
結果の下にあるコピー ボタンを使って CSS、HEX、または HSL のテキストをコピーします。対象アプリが同じ色形式を解釈するか確認してください。
カラーコントラストチェッカーの画面色は印刷結果と一致しますか？
自動的には一致しません。発光型 RGB 画面と反射型の紙とインクは色域や混色モデルが異なるため、印刷用プロファイルと試験印刷（プルーフ）は依然必要です。
カラーコントラストチェッカーだけでデザイントークンを承認できますか？
候補として使用し、実際の背景、ダークモード、インタラクティブ状態、テキストコントラストをトークンの命名・承認前に必ずテストしてください。