カラーコントラストチェッカー

テキストと背景色の WCAG コントラスト比を即チェック。AA / AAA 判定と改善提案付き。

プリセット

色を選ぶ

改善提案

前景色を暗く17.06:1 (AAA)
背景色を明るく17.06:1 (AAA)
17.06 : 1
AAA 達成 🎉
AA通常テキスト✅ Pass
AAA通常テキスト✅ Pass
AA Large大テキスト✅ Pass
AAA Large大テキスト✅ Pass

通常テキスト (14px)

日本語のサンプルテキストです。This is sample text at 14px. アクセシビリティを意識した配色を選びましょう。

大テキスト (24px bold)

見出しサンプル / Heading Sample

使い方

  1. プリセットを選ぶか、カラーピッカーまたは Hex コードで前景色・背景色を指定します
  2. コントラスト比がリアルタイムで表示され、AA / AAA の4種判定が自動で更新されます
  3. 「⇅ 入れ替え」ボタンで前景色と背景色をワンクリックで交換できます
  4. 判定が Fail の場合は「改善提案」に候補色が表示されます。「採用」ボタンで即適用できます

WCAG コントラスト比とは？

WCAG（Web Content Accessibility Guidelines）では、テキストの読みやすさを保証するために最低限のコントラスト比を定めています。 通常テキスト（14px 程度）は 4.5:1 以上（AA）/ 7:1 以上（AAA）、 大テキスト（18px bold 以上または 24px 以上）は 3:1 以上（AA）/ 4.5:1 以上（AAA） が推奨されています。

関連ツール

🎨 配色パレットジェネレーター 🎛️ CSS Variables プレイグラウンド 🌈 グラデーションジェネレーター ← ツール一覧に戻る

詰まったら、ここから質問してね ❓

僕が直接返事するので、数日以内に届きます。

質問フォームへ