コントラストチェッカーは、2つの色間の WCAG 2.1 コントラスト比を計算し、通常テキストと大きなテキストの両方について AA/AAA のしきい値で判定します。ライブプレビューにより選択した色でテキストが表示され、「ページの背景を取得」ボタンで現在のページの色をサンプリングできます。
アクセシビリティへの対応はますます重要になっています。WCAG 準拠は多くの管轄区域で法的な要件となっており、そうでない場合でもコントラストが不十分だとユーザーを遠ざけることになります。コントラストチェッカーは、任意の2つの色が WCAG 基準を満たしているかどうかを即座に判断します。カラーピッカーまたは 16 進数値（HEX）でフォアグラウンドとバックグラウンドを選択すると、ツールが公式の WCAG 輝度式を使用してコントラスト比を計算し、4 つの基準（AA 通常（≥4.5:1）、AA 大きなテキスト（≥3:1）、AAA 通常（≥7:1）、AAA 大きなテキスト（≥4.5:1））で評価します。各基準には合格（Pass）／不合格（Fail）のバッジが明確に表示されます。ライブプレビューでは、選択した色で大きなテキストと通常テキストがレンダリングされるため、実際の視覚的な影響を確認できます。また、便利なボタンを使用して現在のページの body 背景色をサンプリングできるため、実際のサイト上の色の組み合わせが合格するかどうかを確認するのに役立ちます。すべての処理はブラウザ内でローカルに実行され、データがアップロードされることはありません。
公式の WCAG 輝度式を使用してコントラスト比を計算します。結果は正確で、他の準拠したアクセシビリティチェッカーと一致します。
AA 通常、AA 大きなテキスト、AAA 通常、AAA 大きなテキストの合否をグリッド形式で一度に表示します。
選択した色で実際のテキストをレンダリングし、数値上の比率だけでなく視覚的な印象をその場で確認できます。
ワンクリックで現在のページの計算済み body 背景色をサンプリングします。実際の環境での組み合わせをテストするのに便利です。
16 進数値を入力するか、ブラウザ標準のカラーピッカーを使用できます。どちらを編集しても、値は双方向に同期されます。
ワンクリックでフォアグラウンドとバックグラウンドを入れ替えます。反転テーマやホバー状態のチェックに有用です。
カラーパレットを確定する前に、背景に対するすべてのテキスト色の WCAG AA 準拠を確認し、後からの手直しを防ぎます。
「ページの背景を取得」を使用し、実際のテキスト色を貼り付けることで、Lighthouse を開くことなく数分でアクセシビリティ違反を見つけられます。
ブランドカラーがアクセシビリティ基準を満たさない場合、チェッカーを使用して、最も近い準拠したバリエーション（より暗い／明るい色合い）を見つけます。
デフォルト状態だけでなく、ホバー、アクティブ、無効化などの状態における色の変化がコントラスト要件を満たしているかを確認します。
ダークテーマではグレー背景のグレー文字でコントラスト不足になりがちです。最も暗いグレーと背景をチェックして、これらの不備を特定します。
DevSuite Pro のドックにあるコントラストアイコンをクリックします。フォアグラウンドとバックグラウンドの色フィールドがあるパネルが開きます。
カラーピッカーを使用するか、16 進数値をそれぞれ貼り付けます。色を変更するとライブプレビューが即座に更新されます。
中央に表示される大きな数値（例：4.8:1）がコントラスト比です。数値が高いほど良好です。3.0が最低限の目安で、通常テキストの目標は4.5以上です。
AA および AAA、通常テキストと大きなテキストの合否判定バッジにより、現在の組み合わせがどのレベルをクリアしているかを一目で確認できます。
不合格の場合は、フォアグラウンドを暗くするかバックグラウンドを明るくする（またはその逆）など、目標のレベルが「合格」になるまで調整します。
DevSuite Pro を無料でインストールして、ブラウザで 39 以上の開発者ツールを利用しましょう。
