♿WCAGコントラスト比チェッカー

使い方

1. 1

   テキスト色と背景色を入力

   カラーピッカーまたは16進数コード（#RRGGBB）でテキスト色と背景色を入力します。入れ替えボタンで色を反転できます。

2. 2

   コントラスト比を確認

   コントラスト比がリアルタイムで計算されます。21:1が最高値（黒と白）で、1:1が最低値です。

3. 3

   WCAG判定を確認

   AA・AAAレベルごとに通常テキスト・大きいテキスト・UIコンポーネントの合否が表示されます。プレビューで実際の見え方も確認できます。

よくある質問

WCAGとは何ですか？

Web Content Accessibility Guidelines（WCAG）はW3Cが策定したウェブアクセシビリティの国際標準です。視覚障害者や色覚多様性を持つ人々がコンテンツを正しく認識できるよう、色のコントラスト比を含む様々な基準を定めています。

AAとAAAの違いは何ですか？

AAレベルは通常テキストで4.5:1以上、大きいテキストで3:1以上が必要です。AAAレベルはより厳しく、通常テキストで7:1以上、大きいテキストで4.5:1以上が必要です。Webサービスでは最低AA準拠を目指すことが推奨されています。

大きいテキストの基準は？

WCAGでは18ポイント（約24px）以上の通常テキスト、または14ポイント（約18.67px）以上の太字テキストを「大きいテキスト」として扱います。大きいテキストは視認性が高いため、より低いコントラスト比でも許容されています。

UIコンポーネントはどのような基準ですか？

ボタンの枠線・アイコン・入力フィールドの境界線などのUI要素は、3:1以上のコントラスト比が必要（WCAG 2.1 AA基準）です。これはテキストよりも基準が低く設定されています。