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

カラコントラストチェッカーは、デザイナー、開発者、およびアクセシビリティの専門家が、色の組み合わせがWCAG 2.xアクセシビリティ基準を満たしているか確認するのに役立ちます。テキストと背景色の適切なコントラストは、特にロービジョン（弱視）や色覚異常のあるユーザーにとって、読みやすさを確保するために不可欠です。

カラーコントラスト比とは何ですか？

カラーコントラスト比は、2つの色間の知覚される輝度（明るさ）の差を測定するものです。範囲は1:1（同じ色、コントラストなし）から21:1（最大コントラスト：白の背景に黒）までです。この比率は、両方の色の相対輝度値に基づいたWCAG 2.xの計算式を使用して計算されます。

WCAGコントラスト要件

ウェブコンテンツ・アクセシビリティ・ガイドライン（WCAG）は、カラーコントラストについて2つの適合レベルを定義しています：

何が「大きなテキスト」に該当しますか？

WCAGでは、大きなテキストを少なくとも18ポイント（24px）の通常ウェイト、または少なくとも14ポイント（18.66px）の太字ウェイトと定義しています。大きな文字は自然と読みやすいため、大きなテキストのコントラスト要件は低くなっています。

このツールの使い方

1. 色を入力する：カラーピッカーを使用するか、16進数コードを入力するか、プリセット例をクリックして、前景（テキスト）と背景の色を選択します。
2. ライブプレビューを確認する：実際のUI要素（見出し、本文、ボタン、リンク、フォーム入力）で色がどのように見えるか即座に確認できます。
3. 「コントラストを確認」をクリック：正確なコントラスト比と、通常テキスト、大きなテキスト、UIコンポーネントに対するWCAG準拠ステータスを取得します。
4. 提案を適用する：色が不合格の場合、自動提案を使用して、アクセシブルで最も近い代替色を見つけます。

結果の理解

コントラスト比

メインの数値（例：8.59:1）は、2つの色がどれだけ異なって見えるかを示します。数値が高いほど読みやすくなります。4.5:1以上の比率があれば、ほとんどのユーザーが通常サイズのテキストを快適に読むことができます。

総合評価

• AAA (最高): 強化された基準 (7:1以上) を含むすべてのWCAG基準に合格しています。最高のアクセシビリティです。
• AA (良好): 標準的な要件 (4.5:1以上) に合格しています。ほとんどの法域における法的要件を満たしています。
• AA Large (一部合格): 大きなテキストまたはUIコンポーネント (3:1以上) のみに合格しています。通常テキストは不合格です。
• 不合格 (不良): いかなるWCAGコントラスト基準も満たしていません。多くのユーザーにとってテキストが読みにくくなります。

カラー提案

色がコントラスト要件を満たさない場合、ツールは色相と彩度を維持しながら明度を調整することで、最も近いアクセシブルな色を提案します。ワンクリックで提案を適用できます。

カラーコントラストが重要な理由

• 法的準拠: 多くの国で、法律（ADA、セクション508、EN 301 549、EAAなど）によりWCAG AAへの準拠が求められています。
• ユーザーエクスペリエンス: 適切なコントラストは、障害のあるユーザーだけでなく、すべてのユーザーの読みやすさを向上させます。
• SEOへの影響: 検索エンジンは、アクセシビリティをランキングの要因として考慮するようになっています。
• オーディエンスの拡大: 男性のおよそ12人に1人、女性の200人に1人が色覚異常を持っています。

アクセシブルな色を選択するためのヒント

• 十分なコントラストから始めて、その後にデザインを微調整しましょう。後からコントラストを修正するのはより困難です。
• テストせずに色付きの背景に色付きのテキストを配置するのは避けましょう。「違って見える」色であっても、コントラストチェックに失敗することがあります。
• 白背景に薄いグレーのテキストは、最も一般的なアクセシビリティ不備の一つです。
• 監査時だけでなく、デザイン中にこのツールを使用しましょう。早い段階で問題を特定することで、大幅なやり直しを防げます。
• 情報の伝達を色だけに頼らないでください。形、パターン、ラベルも併用しましょう。

よくある質問

カラーコントラスト比とは何ですか？

カラーコントラスト比は、2つの色間の知覚される輝度の差を測定するものです。範囲は1:1（コントラストなし、同じ色）から21:1（最大コントラスト、白に黒）までです。この比率は、WCAG 2.xの計算式（L1 + 0.05）/（L2 + 0.05）を使用して計算されます。ここでL1は明るい方の色の相対輝度、L2は暗い方の色の相対輝度です。

WCAG AA準拠にはどのようなコントラスト比が必要ですか？

WCAG AAでは、通常テキスト（18pt未満または14ptの太字未満）で4.5:1以上、大きなテキスト（18pt以上または14pt以上の太字）で3:1以上のコントラスト比が求められます。非テキストUIコンポーネントやグラフィックオブジェクトの場合、最小値は3:1です。

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

WCAG AAは標準的な準拠レベルで、通常テキストに4.5:1、大きなテキストに3:1を要求します。WCAG AAAはより高いレベルで、通常テキストに7:1、大きなテキストに4.5:1を要求します。AAは多くのアクセシビリティ法で義務付けられていますが、AAAは推奨されるものの、通常ウェブサイト全体に対して義務付けられることはありません。

WCAGガイドラインで「大きなテキスト」と見なされるものは何ですか？

WCAGガイドラインでは、大きなテキストは少なくとも18ポイント（24px）の通常ウェイト、または少なくとも14ポイント（約18.66px）の太字ウェイトと定義されています。大きな文字は低いコントラストレベルでも読みやすいため、大きなテキストのコントラスト要件は低くなっています。

低いカラーコントラストを修正するにはどうすればよいですか？

低いカラーコントラストを修正するには：(1) テキストの色を暗くするか背景を明るくする、またはその逆を行います。(2) 合格する最も近い色を自動で見つける当ツールのカラー提案機能を使用します。(3) フォントサイズを大きくして、要件が低い「大きなテキスト」に該当させます。(4) 情報の伝達を色だけに頼らないようにします。

カラーコントラストはテキストにのみ適用されますか？

いいえ。WCAG 2.1 達成基準 1.4.11では、フォーム入力の境界線、アイコン、コンテンツの理解に不可欠なグラフィックオブジェクトを含む非テキスト要素に対して、最小3:1のコントラスト比を求めています。これはボタン、フォームフィールド、フォーカスインジケーターなどのUIコンポーネントに適用されます。

追加リソース

• WCAG 2.1: コントラスト（最小限）を理解する
• WCAG 2.1: コントラスト（強化）を理解する
• Web Content Accessibility Guidelines - Wikipedia