コントラストチェッカー
WCAGのカラーコントラストを確認
コントラストチェッカー の使い方
WCAGのカラーコントラストを確認 無料オンラインツール、登録不要、広告なし。今すぐ無料でお使いいただけます。
カラーコントラストが重要な理由
日本では約5%の男性と0.5%の女性が何らかの色覚異常を持っています。さらに多くの人が強い日光、粗悪なスクリーン、疲労、加齢による視力低下など困難な環境でテキストを読んでいます。十分なカラーコントラストにより、すべてのユーザーが視覚的な状況に関わらずコンテンツを読めるようになります。
- Webアクセシビリティへの準拠：WCAG 2.1（ウェブコンテンツアクセシビリティガイドライン）は最低限のコントラスト比を定義しています。日本では「JIS X 8341-3:2016」（WCAG 2.0をベースとした国内規格）が障害のある人のウェブアクセシビリティを定めています。公共機関のWebサイトでは法的に準拠が求められます。
- デザイン段階での確認：開発の前、デザイン段階でテキスト/背景の色の組み合わせを確認します。FigmaやSketchで修正する方が、サイト公開後に修正するよりはるかにコストがかかりません。
- コンポーネントライブラリ：デザインシステム内のすべての色の組み合わせがあらゆる使用コンテキストでアクセシビリティ要件を満たすことを確認します。
- ダークモード：ダークモードを実装する際、ライト背景で機能していた色がダーク背景では失敗することがよくあります。各モードで独立して十分なコントラスト確認が必要です。
- データ可視化：グラフの色が色覚異常のユーザーにも区別でき、さまざまな背景色でも読みやすいことを確認します。ビジネスレポートやダッシュボードで重要です。
WCAGのレベル：レベルA（絶対的な最低限）。レベルAA（通常テキストで比率≥4.5:1、大テキストで≥3:1）は多くの国の法的標準で、JIS X 8341-3でも求められます。レベルAAA（比率≥7:1）は最大のアクセシビリティ向けです。
Frequently Asked Questions
WCAG AAが求めるコントラスト比はいくつですか？
WCAG AAは通常テキスト（18ポイント未満、または14ポイント未満の太字）に最低4.5:1のコントラスト比を求め、大テキスト（18ポイント以上、または14ポイント以上の太字）には3:1を求めます。UIコンポーネントとグラフィック要素（アイコン、フォームの境界線）には3:1が必要です。
コントラスト比はどのように計算されますか？
コントラスト比=（L1+0.05）/（L2+0.05）、L1は明るい色の相対輝度、L2は暗い色の相対輝度です。輝度は特定の式に従って線形RGB値から計算されます。最大コントラストは21:1（黒の上の白）。比率1:1はコントラストなし（同一色）を意味します。
コントラスト比は色付きテキストと色付き背景にも適用されますか？
はい。WCAG式は相対輝度を比較します。知覚される明るさだけではありません。緑の背景に赤いテキストはコントラスト比が低い場合があります。両方の色が鮮やかでも同様です。実際の色の組み合わせを常にテストしてください。
カラーコントラストと色覚異常の違いは何ですか？
コントラスト比は輝度の差を測定します。これはすべてのユーザーに影響します（強い光や粗悪なスクリーンでも含む）。色覚異常は色の区別の方法に影響し、必ずしも輝度には影響しません。赤と緑だけを使った高コントラストのデザインは輝度テストをパスしても色覚異常ユーザーには区別できないかもしれません。
フォントの太さはコントラスト要件に影響しますか？
はい。太字と大テキストは本質的に読みやすいため、要件が低くなります。WCAG AAは18ポイント（24px）以上、または14ポイント（約18.67px）の太字テキストには3:1を求めます。小さいまたは非太字テキストには4.5:1が必要です。
コントラストチェッカー vs 色覚異常シミュレーター vs アクセシビリティ監査
コントラストチェッカーは2つの特定の色間の輝度比を確認します。色覚異常シミュレーター（Chrome DevTools、Coblis）はさまざまな色覚障害でデザインがどのように見えるかを表示します。完全なアクセシビリティ監査（axe、Lighthouse、WAVE）はページ全体をすべてのWCAG違反についてスキャンします。完全なアクセシビリティのために：デザイン段階でコントラストを確認し、公開前に色覚異常をシミュレートし、本番サイトで自動監査を実行してください。