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

アクセシビリティ情報と使い方

なぜコントラスト比が重要なのか？

ウェブサイトやアプリケーションにおけるテキストと背景の色のコントラスト比は、視覚に障害のあるユーザー（ロービジョンや色覚特性を持つ方など）だけでなく、すべてのユーザーにとっての読みやすさ（可読性）に直結します。十分なコントラストがないと、文字が読みにくくなったり、重要な情報が伝わりにくくなる可能性があります。特に、モバイルデバイスを明るい屋外で使用する場合など、特定の環境下ではコントラストの低さが顕著になります。

適切なコントラスト比を確保することは、ウェブアクセシビリティの基本的な要件の一つであり、より多くの人が情報にアクセスできるようにするために不可欠です。

WCAG (Web Content Accessibility Guidelines) 基準について

WCAGは、ウェブコンテンツをよりアクセシブルにするための国際的なガイドラインです。コントラスト比に関しては、主に以下の達成基準 (WCAG 2.1 および 2.2) が設けられています。

• レベル AA (ダブルエー)：一般的なアクセシビリティ目標として推奨される基準です。
  • 通常のテキスト（18pt未満、または太字の場合は14pt未満）: 4.5:1 以上
  • 大きなテキスト（18pt以上、または太字の場合は14pt以上）: 3:1 以上
• レベル AAA (トリプルエー)： より高いレベルのアクセシビリティを目指す場合に推奨される基準です。
  • 通常のテキスト（18pt未満、または太字の場合は14pt未満）: 7:1 以上
  • 大きなテキスト（18pt以上、または太字の場合は14pt以上）: 4.5:1 以上

※ ポイント(pt)サイズは、CSSのピクセル(px)値とは異なります。おおよその目安として、18ptは約24px、14ptは約18.66pxに相当します。上のプレビューでは「通常のテキスト」は 16px、「大きなテキスト」は 24px で表示しています。

このコントラスト比チェッカーでは、入力された色に基づいてこれらの基準への適合性をリアルタイムで「合格」「不合格」で示します。

このツールの使い方とメリット

• テキストと背景に使う予定の色（16進数コードまたはカラーピッカー）を入力するだけで、リアルタイムにコントラスト比とWCAG基準の判定結果を確認できます。
• デザインの初期段階で配色を確認することで、手戻りを減らし、アクセシブルなデザインプロセスをサポートします。
• 「色を入れ替える」ボタンで、テキスト色と背景色を簡単に入れ替えて試すことができます。
• プレビュー機能で、通常のテキストと大きなテキストでの実際の色の組み合わせと、それに対応するWCAG基準の判定結果を目で見て確認できます。

コントラスト比を高めるためのヒント

• 基本は白と黒：白い背景に黒いテキスト（またはその逆）は、最も高いコントラスト比 (21:1) を提供します。
• 彩度と明度を意識する：色相（色合い）が近くても、明度（明るさ）や彩度（鮮やかさ）に差をつけることでコントラストを高められます。
• グレーの利用：真っ黒（#000000）の代わりに濃いグレー（例：#333333, #595959）、真っ白（#FFFFFF）の代わりに明るいグレー（例：#F0F0F0, #EAEAEA）を使うことで、少し柔らかい印象にしつつ十分なコントラストを確保できる場合があります。WCAGの基準を満たす範囲で調整しましょう。
• 避けるべき組み合わせ：赤と緑、青と黄色など、色覚特性によっては見分けにくい組み合わせには注意が必要です。また、中間色同士（明るいグレーと中間的な青など）もコントラストが低くなりがちです。
• テストする：デザインツールだけでなく、実際にこのチェッカーのようなツールで確認することが重要です。

より詳しい情報については、WCAG 2.1 解説書 (日本語訳) や、最新の WCAG 2.2 解説書 (日本語訳) などを参照してください。

Q：このツールは WCAG 2.2 に対応していますか？

A：はい、テキストコントラスト比のチェック機能に関しては対応しています。 WCAG 2.2 では、テキストと背景色のコントラスト比に関する基準【 達成基準 1.4.3 コントラスト（最低限）および1.4.6 コントラスト（高度）】は WCAG 2.1 から変更されていません。そのため、このツールで表示されるテキストコントラストの評価結果は WCAG 2.2 にも準拠しています。

ただし、WCAG 2.2 では「2.4.11 フォーカスの可視性 (Focus Appearance)」や「2.5.8 ターゲットサイズ (Target Size (Minimum))」といった新しい達成基準が追加されています。また、WCAG 2.1 からある「1.4.11 非テキストコントラスト (Non-text Contrast)」も引き続き重要です。このツールは、これらのテキスト以外のコントラストやUIコンポーネントの視覚的な側面を評価する機能は含んでいません。

Q：WCAG 2.2 でコントラストに関する主な変更点は何ですか？

A：繰り返しになりますが、テキストと背景色のコントラスト比の基準値自体は変更されていません。

WCAG 2.2 の主な変更点としては、キーボード操作時のフォーカスを見やすくする「2.4.11 フォーカスの可視性 (AA)」や、クリック/タップ領域のサイズを確保する「2.5.8 ターゲットサイズ (AA)」などが追加されました。これらは直接的な色のコントラスト基準ではありませんが、視覚的なアクセシビリティ全体に関わる重要な更新です。また、WCAG 2.1 で導入された「1.4.11 非テキストコントラスト (AA)」の要件は 2.2 でも有効です。

Q：「非テキストコントラスト」とは何ですか？

A：ボタンの境界線、入力フィールドの枠線、チェックボックスやラジオボタンの状態を示す部分、フォーカスインジケーター、グラフや図表の情報を理解するのに必要な視覚的要素など、文字以外の UI コンポーネントやグラフィックが対象です。

これらの要素が、それが何であるか、またはどのような状態（例：フォーカスされている、選択されている）かを識別するために、隣接する背景色との間に 3:1 以上のコントラスト比を持つ必要がある、という WCAG の達成基準【 1.4.11 非テキストコントラスト (AA) 】です。

Q：このツールでチェックできるのはテキストだけですか？

A：はい、このツールは主にテキスト色と背景色の組み合わせのコントラスト比 (WCAG 1.4.3, 1.4.6) を評価することに特化しています。

ボタンの枠線やアイコンといった非テキスト要素のコントラスト比 (WCAG 1.4.11) や、フォーカスの可視性 (WCAG 2.4.11)、ターゲットサイズ (WCAG 2.5.8) を直接チェックする機能は含まれていません。これらの要素のアクセシビリティを確認したい場合は、別途対応するツールや手動での確認が必要です。

Q：結果が「不合格」になった場合はどうすればよいですか？

A：テキスト色か背景色、あるいはその両方を変更して、コントラスト比が目標とする基準値（AA の場合は通常テキストで 4.5:1、大きいテキストで 3:1。AAA の場合はそれぞれ 7:1、4.5:1）を満たすように調整してください。

一般的に、色の明度（明るさ）の差を大きくするとコントラスト比は高くなります。カラーピッカーや 16 進数コード入力欄で色を調整しながら、リアルタイムで結果を確認できます。

外部ガイドライン・翻訳の引用

当サイトでは、下記ガイドライン本文および日本語訳の一部を引用し、説明を補足しています。

• 原文: W3C Web Content Accessibility Guidelines (WCAG)
      © 2025 W3C® (MIT, ERCIM, Keio, Beihang) – W3C Document License
• 日本語訳: WAIC (Web Accessibility Infrastructure Committee) 提供「WCAG 日本語訳」（1.4.3、1.4.6 ほか）
      © WAIC – CC BY 4.0

引用箇所はガイドライン理解促進のみを目的としており、出典およびライセンス表記を明示することで各ライセンス条件を遵守しています。