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

使い方

カラーピッカーを使うか、hex値を直接入力して前景色と背景色を選びます。ツールはWCAG 2.1の式を使って各色の相対輝度を計算します — ガンマ補正後のsRGBチャンネルの加重和 — そしてより明るい輝度をより暗い輝度で割ります (純黒でのゼロ除算を防ぐため、分子と分母に0.05を加算)。結果のコントラスト比は1:1 (同一の色) から21:1 (純白に純黒) までです。4つのWCAGバッジが合否を表示します。通常テキスト用AA (≥ 4.5:1)、大きなテキスト用AA (≥ 3:1)、通常テキスト用AAA (≥ 7:1)、大きなテキスト用AAA (≥ 4.5:1) です。ライブプレビューパネルは通常と大きなテキストのサンプル文を表示し、視覚的に結果を確認できます。計算はすべてブラウザ内で行われ、サーバーとの通信はありません。

活用シーン

• ウェブサイトのリデザイン公開前にブランドカラーパレットのアクセシビリティ準拠を確認する
• ダークまたはライトテーマで読みやすいボタンやリンクの色を選ぶ
• Section 508、EN 301 549、ADAへの準拠のためにWCAG 2.1 AAまたはAAA要件を満たす
• 開発開始前にデザイナーから送られたモックアップを確認し、読めないテキストを指摘する
• 小さな輝度差がどのようにして大きなコントラスト失敗を引き起こすかを示してアクセシビリティを教える