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

テキストと背景の色を WCAG 2.1 のコントラスト比で確認できます。APCA の Lc も参考にできます。

コントラストのチェック方法

  1. 文字色と背景色を入力します。カラーピッカーを使うか、3 桁または 6 桁の HEX コードを入力してください。
  2. コントラスト比と、小さい文字（AA・AAA）、大きい文字（AA）、アイコンや境界線などの UI コンポーネントそれぞれの合否を確認します。
  3. 参考として APCA の Lc 値も確認しましょう。文字の読みやすさを示すもので、合否ではなく目安です。
  4. 不合格の場合は、自動修正で文字色を 4.5:1 に届く最も近い明度に動かすか、色を入れ替えて逆の組み合わせを試します。ライブプレビューでは、見出し、本文、ボタンに当てはめた様子を確認できます。

できること

  • WCAG 2.1 コントラスト比

    正確な比率と、通常の文字、大きい文字、文字以外の UI に対する AA・AAA の結果を確認できます。

  • APCA Lc

    APCA の明度コントラストを、「本文に最適」から「読めない」まで、分かりやすい言葉の用途付きで表示します。

  • 自動修正

    不合格の文字色を、4.5:1 の AA に届く最も近い明度へ調整します。

  • ライブプレビュー

    決める前に、見出し、本文、ボタンでの見え方を確認できます。

  • 分かりやすい解説

    結果が本文と大きい文字にとって何を意味するのか、短い解説が付きます。

よくある質問

コントラストはどうやってチェックする？

チェッカーに文字色と背景色を入力します。WCAG のコントラスト比を計算し、小さい文字、大きい文字、UI コンポーネントについて AA・AAA に合格しているかを表示します。HEX コードの入力でも、カラーピッカーでも指定できます。

WCAG のコントラスト比の基準は？

WCAG 2.1 のレベル AA では、通常の文字は 4.5:1 以上、大きい文字と、入力欄の境界線やアイコンなどの UI コンポーネントは 3:1 以上が必要です。レベル AAA では、通常の文字が 7:1、大きい文字が 4.5:1 です。

WCAG でいう「大きい文字」とは？

24 CSS ピクセル（18 ポイント）以上の文字、または太字の場合は 18.66 ピクセル（14 ポイント）以上の文字です。大きな文字は読み取りやすいため、必要な比率が低くなります。

APCA とは？ 使うべき？

APCA は WCAG 3 の草案に含まれる、知覚に基づくコントラストの手法です。Lc 値を返し、このチェッカーでは Lc 75 以上を本文に十分、Lc 45 以上を大きい文字または太字の下限として扱います。ほとんどの基準や監査で求められるのは今も WCAG 2 の比率なので、両方を確認しましょう。

2 色の順番で結果は変わりますか？

WCAG の比率はどちらを文字色にしても同じなので変わりません。APCA は、どちらが文字でどちらが背景かで結果が変わります。「入れ替え」で両方向を比べてみましょう。

白地に黒のコントラスト比は？

21:1 で、これが最大の比率です。最小は 1:1 で、同じ色どうしの場合です。