コントラストと色
すべてのユーザーに最適な可読性を確保する
WCAG EN 301 549基準
テキストのコントラスト
悪い例
白地に明るい灰色のテキスト（2.2:1）- 不合格
Ratio: 2.2:1白地に中灰色のテキスト（3.8:1）- 不合格
Ratio: 3.8:1白地に黄色のテキスト（1.9:1）- 不合格
Ratio: 1.9:1赤地にオレンジ（1.2:1）- 不合格
Ratio: 1.2:1黒の背景に暗い灰色（2.5:1）- 不合格
Ratio: 2.5:1暗い背景に青（1.8:1）- 不合格
Ratio: 1.8:1良い例
白地に暗い灰色のテキスト（7.0:1）- AAA合格
Ratio: 7.0:1白地に黒のテキスト（21:1）- AAA合格
Ratio: 21:1白地に暗い青のテキスト（5.9:1）- AA合格
Ratio: 5.9:1暗い青地に白（8.6:1）- AAA合格
Ratio: 8.6:1黒の背景に白（21:1）- AAA合格
Ratio: 21:1暗い背景に黄色（12.3:1）- AAA合格
Ratio: 12.3:1説明： WCAG AAコントラスト比は、通常のテキストで最小4.5:1、大きなテキスト（18pt以上または14pt以上の太字）で3:1を要求します。AAAレベルは7:1と4.5:1でより厳格です。
色による情報
悪い例
登録フォーム
🔴 赤 = エラー、緑 = 有効
注文ステータス
良い例
登録フォーム
注文ステータス
説明： 情報は色だけに依存してはいけません。常に追加の視覚的指標（アイコン、パターン、テキスト）を追加します。
色覚異常とアクセシビリティ
悪い例
パフォーマンスチャート
良い例
パフォーマンスチャート
説明： 男性の約8％と女性の0.5％が色覚異常です。赤緑の組み合わせは特に問題があります。
アクセシブルなテーマスイッチャー
悪い例
ページコンテンツ
このテキストはテーマに応じて色が変わります。
情報カード
読むべき重要な情報。
良い例
ページコンテンツ
このテキストはすべてのテーマで良好なコントラストを維持します。
情報カード
常に読みやすい重要な情報。
説明： テーマスイッチャーは、コントラスト比を維持し、可読性を保持し、ユーザーのシステム設定を尊重する必要があります。
リンク - 下線と識別
悪い例
色のみに基づくリンク
Webアクセシビリティは、包括的なサイトを作成するために不可欠です。 アクセシビリティについてもっと学ぶ がベストプラクティスを理解するのに役立ちます。 WCAGガイドラインは、アクセシビリティを向上させるための包括的なフレームワークを提供します。
リソースページにアクセスして、ツールとチュートリアルを見つけてください。
良い例
色のみに基づくリンク
Webアクセシビリティは、包括的なサイトを作成するために不可欠です。 アクセシビリティについてもっと学ぶ がベストプラクティスを理解するのに役立ちます。 WCAGガイドラインは、アクセシビリティを向上させるための包括的なフレームワークを提供します。
リソースページにアクセスして、ツールとチュートリアルを見つけてください。
説明： リンクは色だけに依存せずに識別可能である必要があります。下線、パターンの違い、または他の視覚的指標が不可欠です。