無料コントラストチェッカー
テキストと背景色のコントラスト比をチェックしてWCAG 2.1アクセシビリティ基準を満たしているか確認。
94,217+ コントラストチェックが実行されました
コントラスト比
17.06:1
大きなテキストプレビュー（24px）
通常の本文テキストプレビュー（16px）。典型的な本文サイズでの色の組み合わせの見え方を示しています。
小さなテキスト（14px）— キャプション・脚注・メタデータによく使用されます。
反転：テキストカラーに背景色（17.06:1 — 同じ比率）
AA 通常テキスト
4.5:1が必要
tools.contrast-checker.output.aaLarge
tools.contrast-checker.output.aaLargeReq
tools.contrast-checker.output.aaaNormal
tools.contrast-checker.output.aaaNormalReq
tools.contrast-checker.output.aaaLarge
tools.contrast-checker.output.aaaLargeReq
これらの色でアクセシブルなウェブサイトを構築する準備はできていますか？
これらの色で作成コントラストチェッカーとは？
コントラストチェッカーは、テキスト色と背景色の間のコントラスト比を計算するツールです。十分なカラーコントラストは、視覚障害のある方を含むすべてのユーザーがコンテンツを読めるようにするために不可欠です。
WCAG（Web Content Accessibility Guidelines）は、通常テキストで4.5:1以上、大きなテキストで3:1以上のコントラスト比を要求しています。当ツールは即座にコントラスト比を計算し、AA/AAA準拠状態を表示します。
WCAGコントラストレベルの解説
AA 通常テキスト
最低4.5:1
最低コントラスト比4.5:1が必要。最も一般的なコンプライアンス目標で、18pt（または14ptボールド）未満の本文テキストに適用されます。
AA 大きなテキスト
最低3:1
最低コントラスト比3:1が必要。少なくとも18pt（24px）または14ptボールド（18.66pxボールド）のテキストに適用されます。
AAA 通常テキスト
最低7:1
最低コントラスト比7:1が必要。最も厳格なアクセシビリティ基準。視覚障害のある方に最も読みやすい体験を提供します。
AAA 大きなテキスト
最低4.5:1
最低コントラスト比4.5:1が必要。大きなテキストに対する最高レベルのアクセシビリティ基準。
コントラストのヒント
tools.contrast-checker.tips.tip1
明るいグレー（#f5f5f5）や薄い色の背景の方が、純白よりも目に優しいことがあります。
tools.contrast-checker.tips.tip2
ライトモードで良いコントラストでも、ダークモードでは不十分な場合があります。両方テストしてください。
tools.contrast-checker.tips.tip3
色覚障害のユーザーのために、色だけでなくアイコン、下線、太字なども併用してください。
tools.contrast-checker.tips.tip4
tools.contrast-checker.tips.tip4Desc
tools.contrast-checker.tips.tip5
tools.contrast-checker.tips.tip5Desc
tools.contrast-checker.tips.tip6
tools.contrast-checker.tips.tip6Desc
コントラストチェッカー：Kleap vs 代替サービス
| 機能 | Kleap | WebAIM | Coolors | tools.contrast-checker.comparison.adobeColor |
|---|---|---|---|---|
| 価格 | 完全無料 | 無料 | 無料/有料 | tools.contrast-checker.comparison.priceAdobe |
| tools.contrast-checker.comparison.realTimePreview | tools.contrast-checker.comparison.realTimePreviewKleap | tools.contrast-checker.comparison.realTimePreviewWebaim | tools.contrast-checker.comparison.realTimePreviewCoolors | tools.contrast-checker.comparison.realTimePreviewAdobe |
| tools.contrast-checker.comparison.colorSuggestion | tools.contrast-checker.comparison.colorSuggestionKleap | tools.contrast-checker.comparison.colorSuggestionWebaim | tools.contrast-checker.comparison.colorSuggestionCoolors | tools.contrast-checker.comparison.colorSuggestionAdobe |
| WCAGレベル | AA & AAA | AA & AAA | AAのみ | tools.contrast-checker.comparison.wcagLevelsAdobe |
| ウェブサイトビルダー | AI搭載ビルダー内蔵 | なし | なし | tools.contrast-checker.comparison.websiteBuilderAdobe |
| tools.contrast-checker.comparison.swapColors | tools.contrast-checker.comparison.swapColorsKleap | tools.contrast-checker.comparison.swapColorsWebaim | tools.contrast-checker.comparison.swapColorsCoolors | tools.contrast-checker.comparison.swapColorsAdobe |
| tools.contrast-checker.comparison.randomPair | tools.contrast-checker.comparison.randomPairKleap | tools.contrast-checker.comparison.randomPairWebaim | tools.contrast-checker.comparison.randomPairCoolors | tools.contrast-checker.comparison.randomPairAdobe |