カラーコントラストチェッカー (WCAG)
2つの色がWCAG 2.1のコントラスト最小値を満たすか確認します。
コントラストとアクセシビリティ
WCAG（Web Content Accessibility Guidelines）は読みやすいテキストのための最小コントラスト比を定めています。AAレベル——大半のサイトが目指す基準——は通常テキストに4.5:1、大きなテキスト（18pt以上または14pt太字）に3:1を要求します。AAAはより厳しく7:1です。これを満たさないサイトは、弱視のユーザーや古い画面では読めません。
コントラスト比は直感的ではありません。黒地に赤は目を引きますが5.25:1にしかならず——AAぎりぎりです。白地に薄いグレーは、現代的な「ミニマル」デザインでよく見られますが、完全に不合格なことが多いです。この計算機は比率と、各色ペアがどのWCAGレベルを通過するかを表示します。
Frequently asked questions
WCAGとコントラスト要件は？
WCAG（Web Content Accessibility Guidelines）はウェブアクセシビリティの標準。コントラスト要件：AAレベルは通常テキストに4.5:1、大テキスト（18pt以上または14pt太字）に3:1を要求。AAA（より厳格）はそれぞれ7:1と4.5:1。大半のサイトはAAを目指します。
コントラスト比はどう計算する？
2色の相対輝度を比較：比率 = (L1＋0.05) / (L2＋0.05)、L1は明るい色、L2は暗い色。白地に黒は21:1（最大）。純赤（#FF0000）は純黒に対しても5.25:1——赤は思うより知覚的に暗いのです。
なぜ一部の色ペアは良く見えても失格になる？
目は文脈に適応します。グレー地にグレーは、良い照明の完璧な視覚の人には読めると感じられますが、弱視、古いモニター、日光の反射、色覚異常のユーザーには失格。WCAG比率は最も広いオーディエンスで機能する最低値で、「私にはOKに見える」基準ではありません。
非テキスト要素は？
WCAG 2.1は1.4.11ガイドラインを追加：UIコンポーネントとグラフィックオブジェクトは隣接色に対して3:1コントラストが必要。フォーム境界、アイコン、チャート、フォーカスインジケーターを含みます。白地に薄灰色の境界は失格——現代のミニマルデザインでよくある問題です。
Advertisement
728 × 90