カラーコントラストチェッカーとは？

カラーコントラストチェッカーは、前景色と背景色のコントラスト比をWCAG 2.1アクセシビリティ基準に基づいて評価します。選んだ色の組み合わせが通常テキストおよび大テキストのAA・AAAガイドラインを満たしているか即座に判定します。

使い方

1. ステップ1 — カラーピッカーまたはHEX/RGB値の入力で、前景色（テキスト色）を設定します。
2. ステップ2 — 同じ方法で背景色を設定します。コントラスト比とWCAG準拠レベルがリアルタイムで更新されます。
3. ステップ3 — AAおよびAAAレベルの合否バッジを確認し、すべての基準を満たすまで色を調整します。

結果

デザイナーがダークグレーのテキスト（#333333）をライトブルーの背景（#E3F2FD）でテストすると、ツールは10.5:1のコントラスト比を表示し、すべてのテキストサイズでWCAG AAおよびAAAに合格していることを示します。

関連ツール