カラーコントラストチェッカー
テキストと背景のWCAG 2.1カラーコントラスト比を確認します。標準テキストと大きなテキストのAA とAAAコンプライアンスを検証します。
カラーコントラストチェッカーの使い方
- 1フォアグラウンド（テキスト）の色をHEX、RGB、または名前付き色で入力します。
- 2背景色を入力します。
- 3コントラスト比とWCAG 2.1のAA/AAAコンプライアンスを標準テキストと大きなテキストで確認できます。
- 4アクセシビリティ要件を満たすまで色を調整します。
Zenovayアナリティクス
関連ツール
よくある質問
WCAGカラーコントラストとは何ですか？▾
WCAG（Web Content Accessibility Guidelines）は、視力が低い人や色覚異常のある人がコンテンツを読めるように、テキストとその背景の間に十分なカラーコントラストを必要とします。コントラスト比は1:1（コントラストなし）から21:1（黒が白）で測定されます。
WCAG AA vs AAA コンプライアンスとは何ですか？▾
WCAG AAは通常のテキストで4.5:1のコントラスト比、大きなテキスト（18pt以上または14pt以上の太字）で3:1を必要とします。AAAは通常のテキストで7:1、大きなテキストで4.5:1を必要とします。AAはほとんどのアクセシビリティ法（ADA、EN 301 549）の法的最小値です。AAAはゴールドスタンダードです。
WCAGで大きなテキストとしてカウントされるものは何ですか？▾
大きなテキストは、通常の重さで18pt（24px）以上、または太字で14pt（約18.67px）以上と定義されます。大きなテキストは低いコントラストで読みやすいため、より低いコントラスト要件を持っています。
カラーコントラストがSEOにとって重要なのはなぜですか？▾
低いコントラストのテキストはバウンスレート（ユーザーが去る）を増加させ、ページ上の時間を短縮し、Core Web Vitalsスコアを損傷します。Googleはランキングでエンゲージメント信号を使用します。アクセス可能なサイトは、より多くのユーザーに効果的にサービスを提供するため、ランキングも向上します。
低いコントラストを修正するにはどうすればよいですか？▾
テキストの色を濃くするか、背景を明るくします（ライトテーマの場合）。10〜20％の明度の小さな段階的調整はしばしば十分です。明度を調整しながらブランド色調を維持するために色相環を使用してください。
このツールはどのようなカラーフォーマットを受け入れますか？▾
このツールは16進数カラー（#fff、#ffffff）、RGB（rgb（255,255,255））、名前付きCSSカラー（白、赤）、およびHSL（hsl（0、0％、100％））を受け入れます。16進法は最も信頼できるフォーマットです。
WCAGコントラストはアイコンとグラフィックスに適用されますか？▾
WCAG 1.4.11（テキスト以外のコントラスト、レベルAA）は、UIコンポーネント（アイコン、ボタン、フォームコントロール）と情報グラフィックスで3:1のコントラスト比を必要とします。このツールはテキストコントラスト（WCAG 1.4.3および1.4.6）に焦点を当てています。