WebTools
🇺🇸🇯🇵🇨🇳🇰🇷

コントラスト比ツール

AA/AAA適合インジケーター付きのWCAGコントラスト比を計算します。

21.00:1
Sample Text — Contrast Ratio
The quick brown fox jumps over the lazy dog
AA Large (3:1)18pt or 14pt bold
PASS
AA Normal (4.5:1)Body text
PASS
AAA Large (4.5:1)Enhanced large
PASS
AAA Normal (7:1)Enhanced body
PASS

関連ツール

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

コントラスト比ツールの主な使い方・用途

  • ✓WCAG色コントラストの確認
  • ✓アクセシビリティの検証
  • ✓Webデザインの色選び

使い方（ステップ別）

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

このツールの特徴

  • ●WCAG AA/AAA基準チェック
  • ●コントラスト比の計算
  • ●プレビュー表示

このツールについて

AA/AAA適合インジケーター付きのWCAGコントラスト比を計算します。