WebTools
🇺🇸🇯🇵🇨🇳🇰🇷

カラーコントラスト確認

前景色と背景色のWCAGコントラスト比を計算します。

Color Contrast Checker

#1a1a1a
#ffffff

Sample Text

The quick brown fox jumps over the lazy dog

17.40:1
Contrast Ratio
PASSAA Normal (4.5:1)
PASSAA Large (3:1)
PASSAAA Normal (7:1)
PASSAAA Large (4.5:1)

関連ツール

コントラスト比ツールカラーコード変換（HEX/RGB/HSL）CSSカラー名一覧グラデーション生成

カラーコントラスト確認の主な使い方・用途

  • ✓アクセシビリティ基準の確認
  • ✓Webコンテンツガイドライン（WCAG）準拠
  • ✓UIデザインの視認性確認
  • ✓テキストと背景色の組み合わせ検証
  • ✓障害者対応Webサイトの設計

使い方（ステップ別）

  1. 1
    前景色を選ぶ— テキスト等の前景色をカラーピッカーで選択します。
  2. 2
    背景色を選ぶ— 背景色をカラーピッカーで選択します。
  3. 3
    結果を確認する— WCAG AA・AAAの合否がコントラスト比とともに表示されます。

このツールの特徴

  • ●WCAG 2.1コントラスト比の計算
  • ●AA・AAAの通常・大文字判定
  • ●視覚的なテキストプレビュー
  • ●リアルタイム更新

このツールについて

前景色と背景色のWCAGコントラスト比を計算します。