WCAG AA・AAA • APCA Lc • ローカル計算

カラーコントラストチェッカー

テキスト色と背景色のコントラストを WCAG の AA・AAA 基準で確認し、APCA Lc 値も表示します。通常サイズ、大きなテキスト、UI コンポーネントをブラウザ内で評価できます。

WCAG 基準でカラーコントラストを確認

テキスト色と背景色を入力すると、WCAG 2.x のコントラスト比、通常サイズ・大きなテキスト・UI コンポーネントの AA と AAA の結果、さらに APCA Lc の参考値を確認できます。必要な基準を満たすまで、どちらの色も調整できます。

カラーコントラストの確認方法

  1. 1.カラーピッカー、HEX 入力、HSL スライダーでテキスト色と背景色を設定します
  2. 2.コントラスト比と AA・AAA の判定がすぐに更新されることを確認します
  3. 3.明度を調整するか自動調整を使い、通常サイズ、大きなテキスト、UI コンポーネントに必要なレベルを目指します
  4. 4.URL をコピーして、同じ色の組み合わせを共有します

色はブラウザ内で計算され、アップロードされません

WCAG 2.x の相対輝度式でコントラスト比を計算します

補助的な参考値として APCA の知覚コントラスト Lc を表示します

色の組み合わせは URL に残るため、同じチェックを再現・共有できます

カラーコントラストチェッカーのよくある質問

色がサーバーに送信されることはありますか？

ありません。入力した 2 色からコントラスト比をブラウザ内で計算します。

コントラスト比は何を表しますか？

2 色の相対輝度を比較する値で、同じ色の 1:1 から、白地に黒の 21:1 までの範囲です。WCAG の AA では通常サイズのテキストに少なくとも 4.5:1 が必要です。

AA と AAA は何を意味しますか？

WCAG の適合レベルです。通常サイズのテキストでは AA に少なくとも 4.5:1、AAA に 7:1 が必要です。大きなテキストの基準はそれぞれ 3:1 と 4.5:1 です。

大きなテキストの結果はどう使いますか？

この行は WCAG 2.x の大きなテキスト用しきい値、AA は 3:1、AAA は 4.5:1 で判定します。実際のデザインでは、文字サイズと太さが大きなテキストの定義に当てはまるかも確認してください。

APCA Lc 値とは何ですか？

APCA は WCAG 3 の検討で扱われている知覚コントラストのアルゴリズムです。このページでは補助指標として Lc 値を表示しますが、適合判定は WCAG 2.x の AA・AAA 結果に基づきます。

基準を満たさない配色はどう調整しますか？

どちらかの色の横にある AA への自動調整を使うと、その色の明度を変更して通常サイズのテキストで 4.5:1 を目指します。その後、HSL スライダーで色相、彩度、明度を調整できます。