カラーコントラストチェッカー
WCAG 2.1 準拠のカラーコントラスト比をチェック。テキストと UI 要素の AA および AAA 基準を即座に検証。
WCAG コントラスト比とは？
WCAG コントラスト比は、前景色と背景色の輝度差を測定します。1:1 から 21:1 の範囲です。
WCAG AA と AAA の要件は？
WCAG AA は通常テキスト 4.5:1 以上、大テキスト 3:1 以上が必要です。AAA は 7:1 と 4.5:1 です。
大テキストとは？
大テキストは 18pt（24px）以上、または 14pt（18.66px）太字以上と定義されます。
なぜカラーコントラストが重要なの？
適切なコントラストは視覚障害者にとってテキストを読みやすくし、すべての人の可読性を向上させます。
コントラスト比の計算方法は？
相対輝度値を使用して計算します。式は (L1 + 0.05) / (L2 + 0.05) です。
UI 要素の最小コントラストは？
WCAG は UI コンポーネントとグラフィカルオブジェクトに 3:1 以上を要求します。
どんな色の組み合わせでも使える？
すべての組み合わせがアクセシビリティ基準を満たすわけではありません。このチェッカーで検証してください。
相対輝度とは？
色の知覚輝度で、0（黒）から 1（白）の範囲です。sRGB 色空間を使用して計算されます。
画像のコントラストも確認する必要がある？
画像内のテキストは通常のテキストと同じ要件を満たす必要があります。装飾画像には適用されません。
コントラストに役立つツールは？
ブラウザの開発者ツール、デザインソフトのプラグイン、またはこのようなオンラインチェッカーを使用してください。
カラーコントラストチェッカーの使い方
テキストと UI のコントラストが WCAG 2.1 の AA・AAA 基準を満たすか、ブラウザ内で即座に判定できます。2 色を入力するだけで比率をローカル計算し、データは端末から出ません。
- Foreground Color 欄に文字色を入力または貼り付けます。HEX や RGB など対応形式ならどれでも構いません。
- Background Color 欄に文字の背後にある背景色を入れると、コントラスト比が計算されます。
- 算出された比率と、通常サイズ・大きなサイズのテキストに対する AA と AAA の合否表示を確認します。
- 本文なら 4.5:1、大きな文字や UI 部品なら 3:1 を超えるまで、どちらかの色を微調整します。
- Foreground Color と Background Color の値を入れ替えて、逆の組み合わせ（ダークテーマの明るい文字など）も試します。
長文の読みやすさには AAA（7:1）が理想的ですが、多くのアクセシビリティ基準が要求する最低ラインは 4.5:1（AA）です。
関連ツール
- カラーピッカー スポイトで画面上の任意の色を取得。HEX、RGB、HSLコードを即座にコピー。無料オンラインカラーピッカー。
- カラーパレットジェネレーター 無料オンラインジェネレーターで、美しく調和のとれたカラーパレットを即座に作成。単色、類似色、補色、三色、スプリット補色、四色モードに対応。HSLスライダーで色を微調整し、お気に入りをロックして、CSS、Tailwind、JSON、SVGとしてエクスポート。100%ブラウザベース、データがデバイスから離れることはありません。
- 色覚異常シミュレーター 無料のオンライン色覚異常シミュレーター。プロタノピア、デューテラノピア、トリタノピアなどのデザインテストに。100%プライベート、ブラウザで動作。
- GIFフレーム分割 GIFアニメーションから個別フレームをPNGまたはスプライトシートとして抽出・ダウンロード。プレビューとZIPエクスポート対応の無料オンラインツール。
- GIF逆再生 GIFアニメーションの再生順序を無料で逆転。アップロード、プレビュー、即座にダウンロード。
- GIFスピード変更 GIFアニメーション速度をオンラインで変更。GIFファイルを即座に加速または減速。
- 動画をGIFに 動画をアニメーションGIFにオンライン変換。品質・フレームレート・解像度をブラウザで直接調整、アップロード不要。
- ミームジェネレーター 無料オンラインのミームジェネレーター。どんな画像にも定番の上下テキストを追加し、自由にドラッグして配置。PNG・JPEGですぐにダウンロードできます。