このツールに問題がありますか?

「WCAGコントラストチェック オンライン」について

このツールは 2 色(通常は前景の文字色と背景色)のコントラスト比を測定し、WCAG(ウェブコンテンツアクセシビリティガイドライン)の読みやすさ基準を満たすか判定します。通常/大きい文字サイズで AA/AAA の合否を表示。

WCAG 適合は法的要件化が進んでいます:政府サイト、教育プラットフォーム、公共セクター、欧米の多くの商用サイトは少なくとも WCAG 2.1 AA を満たす必要があります。コントラスト不足は最もよく指摘される問題。

デザイン中のテキスト色選び、既存サイトのアクセシビリティ監査、全体デザインを大きく変えずに AAA を満たす代替色探しに。

このツールの使い方

WCAG カラーコントラストをチェックする手順

  1. 前景色

    「Foreground」はテキストやアイコンの色(hex:#RGB または #RRGGBB)。先頭の `#` は任意、大小文字は区別なし。

  2. 背景色

    「Background」は前景の下にある面(ページ背景・ボタンの塗りなど)。同じ hex 形式。両フィールドは横並びでペア表示。

  3. 「実行」

    結果は contrastRatio(例:4.56)と wcagNormalText / wcagLargeText のパス/フェイル帯。通常テキストは ≥ 4.5 (AA) / 7 (AAA)、大きいテキストは ≥ 3 (AA) / 4.5 (AAA) が必要。

  4. 等級の読み方

    AA は最も一般的な法令/規格要件、AAA はさらに厳しく本文には非現実的なことが多い。大きいテキストは 18pt 以上のレギュラーまたは 14pt 以上の太字;それ未満は通常テキストとして判定。