WCAG 2.1 / 2.2 に基づくコントラスト比の判定基準
Webアクセシビリティの国際的なガイドラインであるWCAG 2.1および2.2では、視覚障害を持つユーザーや、多様な閲覧環境における情報の読みやすさを確保するために、テキストと背景のコントラスト比について明確な基準を設けています。
コントラスト比は、最もコントラストが低い1:1（同色）から、最もコントラストが高い21:1（白と黒）までの範囲で算出されます。本ツールはこのWCAG 2.1 / 2.2の計算式を採用しており、入力された文字色と背景色から正確な比率を測定します。
アクセシビリティの適合レベルには「AA」と「AAA」があり、それぞれ以下のコントラスト比が求められます。
- 通常のテキスト: AAレベルでは4.5:1以上、AAAレベルでは7:1以上のコントラスト比が必要です。
- 大きなテキスト: AAレベルでは3:1以上、AAAレベルでは4.5:1以上のコントラスト比が必要です。
通常のテキストと大きなテキストの定義
アクセシビリティ基準において、テキストはそのサイズと太さによって「通常のテキスト」と「大きなテキスト」に分類されます。大きなテキストは視認性が高いため、通常のテキストよりも低いコントラスト比での適合が認められています。
- 大きなテキスト: 18pt（約24px）以上、または太字（ボールド）の場合は14pt（約18.5px）以上のサイズを指します。
- 通常のテキスト: 上記の基準を満たさない、より小さなサイズのテキスト全般を指します。
デザインを設計する際は、使用するフォントサイズがどちらの定義に該当するかを確認し、適切なコントラスト比を確保する必要があります。
UI部品およびグラフィックにおけるコントラスト
Webサイトやアプリケーションを操作する上で、テキスト以外の視覚要素の視認性も重要です。WCAG 2.1 / 2.2では、ボタンの境界線、フォームの入力欄、アイコンなどの「UIとグラフィック」に対してもコントラスト基準が設けられています。
「UIとグラフィック」の判定には、テキストのようなAAとAAAの区別はなく、単一の基準値として3:1以上のコントラスト比が必要とされています。この基準を満たすことで、ユーザーは操作可能な要素や重要なグラフィック情報を正確に識別できるようになります。
入力可能なカラーフォーマットと操作方法
本ツールでは、デザインや開発の実務で広く使われている以下のカラーフォーマットを直接入力してチェックすることができます。
- HEX値: 例として
#1a1a1aなどの16進数表記。 - RGB値: 例として
rgb(26, 26, 26)などの表記。 - HSL値: 色相、彩度、輝度による表記。
初期状態では、文字色に #4f46e5、背景色に #ffffff が設定されており、この場合のコントラスト比は6.29:1となります。また、文字色と背景色を瞬時に入れ替えてコントラストを評価できる「文字色と背景色を入れ替える」ボタンも搭載されています。
入力された値が正しくない場合、以下のエラーメッセージが表示されます。
- 文字色が無効な場合: 「「#1a1a1a」や「rgb(26, 26, 26)」のような有効な文字色を入力してください。」
- 背景色が無効な場合: 「「#ffffff」や「rgb(255, 255, 255)」のような有効な背景色を入力してください。」
判定結果と総合評価（バーディクト）の読み方
色を入力すると、ツールは「通常のテキスト」「大きなテキスト」「UIとグラフィック」の各項目について「合格」または「不合格」を判定し、最終的な総合評価を以下のメッセージで示します。
- 通常のテキストでAAおよびAAAレベルに合格しています。（通常のテキストで7:1以上の比率を達成している場合）
- 通常のテキストでAAレベルに合格しています。（通常のテキストで4.5:1以上7:1未満の比率の場合）
- 大きなテキストのみAAレベルに合格しています。（比率が3:1以上4.5:1未満で、通常のテキストの基準を満たさない場合）
- AAの最小基準未満です。コントラストを上げてください。（比率が3:1未満の場合）
ブラウザ内処理によるプライバシー保護
本ツールでのコントラスト比の計算および判定処理は、すべてお使いのブラウザ上で行われます。入力したカラーコードやデータが外部のサーバーやBroBroGoにアップロードされることはありません。
よくある質問（FAQ）
AAおよびAAAの判定結果は何を意味していますか？
AAは多くのWebサイトが目標とする標準的なレベルで、通常のテキストで4.5:1以上、大きなテキストで3:1以上の比率が必要です。AAAはさらに厳格なレベルで、通常のテキストで7:1以上、大きなテキストで4.5:1以上が求められます。コントラスト比は1:1（コントラストなし）から21:1（白背景に黒文字）までの範囲で表されます。
「大きなテキスト」とはどのようなサイズを指しますか？
18pt（約24px）以上、または太字（ボールド）の場合は14pt（約18.5px）以上のテキストを指します。大きなテキストはコントラストが低くても視認性を維持できるため、通常のテキストよりも緩い基準（AAは3:1以上、AAAは4.5:1以上）で合格判定となります。
どのカラーフォーマットを入力できますか？
「#1a1a1a」のようなHEX値、「rgb(26, 26, 26)」のようなRGB値、またはHSL値を入力するか、カラーパレットをクリックして色を選択できます。入れ替えボタンを使用すると、文字色と背景色を瞬時に入れ替えることができます。
このツールはWCAG 2と新しいAPCA方式のどちらを使用していますか？
本ツールは、現在のアクセシビリティ基準や監査で参照されているWCAG 2.1 / 2.2の計算式を採用しています。APCAはWCAG 3向けに策定中の、より人間の知覚に合わせた新しい手法ですが、まだ正式な準拠規格ではないため、ここでの判定結果には使用していません。