カラーコントラストチェッカー
いろはにほへと ちりぬるを
いろはにほへと ちりぬるを
コントラスト比 21:1
通常テキスト
AA
AAA
大きいテキスト
AA
AAA
このツールとは カラーコントラストチェッカー
このツールは、テキストの色と背景色の間のコントラスト比を測定し、WCAG 2.1のアクセシビリティ基準と照らし合わせます。2つの色を組み合わせたライブプレビューを表示し、通常テキストと大きいテキストそれぞれについてAAまたはAAAに合格するかを判定するので、本番環境に出る前に可読性の問題に気づけます。
使い方
- 最初のフィールドにテキストの色をHEXコードで選択または入力します。
- 2番目のフィールドに背景色を選択または入力します。
- コントラスト比とAA・AAAの合格/不合格バッジを確認します。
- 入れ替えボタンをクリックして色を逆にして試します。
- URLをコピーして、正確な色の組み合わせをチームと共有します。
こんなときに便利
新しいデザインのテキストカラーを選んでいて、読みやすさに不安があるときに便利です。例えば#767676を#FFFFFFの上に置くと、コントラスト比は4.54:1。通常テキストのAAには合格しますが、AAAには不合格です。クライアントのサイトを確認するときも、自分のアプリを公開する前も、この差がアクセシビリティ監査を通るかどうかの分かれ目になります。
よくある質問
テキストに適したコントラスト比はどれくらいですか？
WCAG AAでは通常テキストで4.5:1以上、大きいテキスト（18pt、または太字14pt以上）で3:1以上が必要です。WCAG AAAはさらに厳しく、通常テキストで7:1以上、大きいテキストで4.5:1以上が求められます。
コントラスト比の最大値はどれくらいですか？
純粋な黒（#000000）と純粋な白（#FFFFFF）の組み合わせで得られる21:1が最大値です。どの色の組み合わせもこれを超えません。
AAに不合格になったのに、自分にはデザインが問題なく見えるのはなぜですか？
コントラスト比は個人の好みではなく、アクセシビリティを測る基準です。弱視の人や、明るい日差しの下で画面を見る人は、一般的な視力の人には問題なく見える組み合わせでも、より高いコントラストを必要とします。
このツールは色覚異常もチェックできますか？
いいえ。このツールはWCAGの計算式に基づく輝度コントラストをチェックするもので、多くの色覚異常を含めすべての利用者に有益ですが、特定の色覚特性をシミュレートするものではありません。