コントラストチェッカー（WCAG 2.1対応）
文字色と背景色のコントラスト比をWCAG基準で判定。
不合格なら最も近い合格カラーを自動提案。認定証の発行も対応。
🔤 文字色 (Text Color)
🎨 背景色 (Background Color)
これは通常テキスト (16px) のプレビューです
これは太字テキスト (16px bold) です
これは大きなテキスト (24px) です
これは大きな太字テキスト (18px bold) です
Contrast Ratio
12.63 : 1
AA 通常テキスト
4.5:1 以上
AA 大きなテキスト
3:1 以上
AAA 通常テキスト
7:1 以上
AAA 大きなテキスト
4.5:1 以上
💡 AA基準を満たす最も近い色の提案:
文字色を調整:
背景色を調整:
🏆 WCAG AA 適合認定書
※「𝕏 でシェア」ボタンを押すと認定書も自動的にダウンロードされます
📋 CSSコード
概要
「コントラストチェッカー」は、Webサイトやアプリの配色がWCAG 2.1（Webコンテンツ・アクセシビリティ・ガイドライン）のコントラスト比基準を満たしているかを即座に判定する無料ツールです。
2024年4月に施行された改正障害者差別解消法により、日本でも民間事業者のWebアクセシビリティ対応が合理的配慮の提供として努力義務となりました。配色のコントラスト比はアクセシビリティ対応の最も基本的かつ重要な要素です。
基準を満たさない場合は、元の色に最も近い合格カラーを自動提案する機能を搭載。WCAG AA基準を満たした場合は認定証の発行・ダウンロード・Xでのシェアも可能です。
使い方
色を入力
カラーピッカーをクリックするか、HEXコード（例: #333333）を直接入力します。文字色と背景色の2色を入力してください。
判定結果を確認
コントラスト比とWCAG AA/AAA基準の合否がリアルタイムで表示されます。プレビューで実際の視認性も確認できます。
認定証を発行
AA基準を満たした場合、WCAG AA適合認定証をダウンロードできます。Xへのシェアにも対応しています。
用語集
- コントラスト比 (Contrast Ratio)
- 前景色と背景色の明暗差を数値で表現したもの。1:1（差なし）〜21:1（白と黒）の範囲で、WCAG基準では4.5:1以上が通常テキストに推奨されます。
- WCAG (Web Content Accessibility Guidelines)
- W3Cが策定したWebコンテンツのアクセシビリティガイドライン。色のコントラストに関する明確な基準値が定められており、世界中の政府・企業が準拠を求められています。
- AA基準
- WCAGのコントラスト基準レベルの一つ。通常テキスト（18pt未満）は4.5:1以上、大きなテキスト（18pt以上）は3:1以上のコントラスト比が必要です。一般的なWebサイトで達成すべき最低基準です。
- AAA基準
- WCAGの最も厳しいコントラスト基準。通常テキストは7:1以上、大きなテキストは4.5:1以上が求められます。高齢者や視覚障害者への配慮が特に求められる場面で適用されます。
- 相対輝度 (Relative Luminance)
- 色の明るさを0（黒）〜1（白）の範囲で表現した数値。コントラスト比の算出に使用され、RGBの各チャンネルにガンマ補正を適用して計算されます。
- アクセシビリティ (Accessibility)
- 障害の有無や年齢に関わらず、すべての人がWebコンテンツを利用できるようにする取り組み。色のコントラストはその基本的な要素の一つです。
- カラーピッカー
- 色を視覚的に選択するUI要素。本ツールではカラーピッカーで前景色・背景色を設定し、リアルタイムでコントラスト比を確認できます。
FAQ
- Q.WebサイトのテキストのコントラストのWCAG基準は？
- WCAGのAA基準では、通常サイズのテキストは背景との4.5:1以上のコントラスト比が必要です。大きなテキスト（18pt以上）は3:1以上でOKです。
- Q.色覚特性（色覚異常）への対応もチェックできますか？
- 現在のバージョンはコントラスト比の数値チェックに特化しています。色覚シミュレーションが必要な場合は、専用のシミュレーションツールと併用してください。
- Q.コントラスト比はどのように計算されますか？
- WCAGの公式に従い、2色の相対輝度（Relative Luminance）を算出し、(L1 + 0.05) / (L2 + 0.05) の式でコントラスト比を求めています。
- Q.AA基準とAAA基準の違いは何ですか？
- AA基準は最低限の基準（通常テキスト4.5:1以上）、AAA基準はより厳しい基準（通常テキスト7:1以上）です。一般的なWebサイトではAA基準の達成が推奨されています。
- Q.入力した色データはサーバーに送信されますか？
- いいえ。コントラスト比の計算はすべてブラウザ内で完結しており、色情報が外部に送信されることは一切ありません。
- Q.HEXカラーコード以外でも入力できますか？
- HEX（#ffffff）形式での入力に加え、カラーピッカーでの視覚的な色選択とRGB数値の直接入力にも対応しています。
- Q.このツールの結果はWCAG準拠の証明になりますか？
- 本ツールはコントラスト比の計算補助ツールです。公式な準拠認証にはW3C認定の監査ツールや第三者評価が必要です。
活用シーン
Webデザインの配色確認
ランディングページや企業サイトのデザイン段階でコントラストを確認。法令・ガイドライン準拠のデザインを実現。
モバイルアプリのUI確認
ボタンテキストや入力フォームのラベルカラーが視覚障害のあるユーザーにも読みやすいか確認。
企業のアクセシビリティ対応
改正障害者差別解消法への対応として、既存サイトのコントラスト比を一括確認。問題のある箇所を特定し改善。
印刷物・資料の確認
PowerPointやWordの文字色と背景色のコントラストを確認。プレゼン資料や配布物の視認性を向上。