無料カラーコントラストチェッカー
WCAG 2.1アクセシビリティ基準に対して色のコントラスト比をテストします。テキストの読みやすさのためにAAおよびAAAの準拠を確認します。無料、即時、プライベート。
カラーコントラストチェッカーは、相対輝度の公式を使って、任意の前景／背景の組み合わせを WCAG 2.1 AA・AAA 基準と照合します。コントラスト比、テキストサイズと UI コンポーネントごとの合否、ライブプレビュー、第一色覚（P 型）・第二色覚（D 型）・第三色覚（T 型）の色覚シミュレーションを表示。失敗時には基準を満たす代替色を提案します。すべてブラウザ内で完結。FreeToolHub 制作。
| 通常テキスト | 大きなテキスト | |
|---|---|---|
| WCAG AA | ✓ 合格 4.5:1の比率が必要 | ✓ 合格 3:1の比率が必要 |
| WCAG AAA | ✓ 合格 7:1の比率が必要 | ✓ 合格 4.5:1の比率が必要 |
| UIコンポーネント | ✓ 合格 3:1の比率が必要（WCAG 2.1） | |
よくある質問
カラーコントラスト比とは何ですか？
コントラスト比は、2つの色の間の知覚される明るさの差を測定し、1:1（コントラストなし）から21:1（最大コントラスト、白地に黒）の比率として表されます。WCAGの相対輝度の公式を使用して計算されます。
WCAG準拠にはどのコントラスト比が必要ですか？
WCAG AAは通常テキストで最低4.5:1、大きなテキスト（18ptまたは14pt太字）で3:1のコントラスト比を要求します。WCAG AAAは通常テキストで7:1、大きなテキストで4.5:1を要求します。UIコンポーネントはWCAG 2.1で少なくとも3:1が必要です。
WCAGでの「大きなテキスト」とは何ですか？
大きなテキストは、通常の太さで18ポイント（24px）以上、または太字で14ポイント（約18.66px）以上と定義されています。大きなテキストは本質的に読みやすいため、コントラスト要件が低くなっています。
なぜカラーコントラストがアクセシビリティに重要なのですか？
男性の約12人に1人、女性の約200人に1人が何らかの色覚異常を持っています。コントラストの低いテキストは、弱視や色覚異常のある人にとって読みにくいか不可能です。適切なコントラストにより、すべての人がコンテンツを読めるようになります。
このツールは色の選択を保存しますか？
いいえ。すべてブラウザ内でローカルに実行されます。色、結果、データはサーバーに送信されたり保存されたりしません。プライバシーは完全に保護されています。
色の提案機能はどのように機能しますか？
色のペアがWCAGレベルに合格しない場合、ツールは元の色相と彩度を維持しながらHSL色空間の明度を調整して、合格する最も近い色を自動的に計算します。より暗い前景とより明るい背景の両方を提案します。