ToolPal

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

アクセシビリティのためのWCAGカラーコントラスト比確認。テキストと背景色のAA/AAA準拠を検証。

大きいテキストプレビュー

小さい本文テキストのプレビュー — ユーザーが読むテキストです。

17.40

コントラスト比

WCAG 2.1結果

✓通常テキスト AA（4.5:1）
✓大きいテキスト AA（3:1）
✓通常テキスト AAA（7:1）
✓大きいテキスト AAA（4.5:1）

AA Normal: 通常テキストの最低コントラスト（18pt/14pt太字未満）

AAA Normal: 通常テキストの強化コントラスト — 最高の読みやすさ

AA Large: 大きいテキストの最低コントラスト（18pt以上または14pt以上太字）

使い方

アクセシビリティのためのWCAGカラーコントラスト比確認。テキストと背景色のAA/AAA準拠を検証。

  1. 1Enter or pick a foreground (text) color using the color picker or hex input.
  2. 2Enter or pick a background color the same way.
  3. 3The tool calculates the contrast ratio and displays it immediately.
  4. 4Check the WCAG AA and AAA pass/fail badges for normal text, large text, and UI components.
  5. 5Adjust either color until you meet the required WCAG standard.

主な機能

  • Calculates WCAG 2.1 contrast ratio between any two colors
  • Shows pass/fail status for AA and AAA levels across text sizes
  • Color picker and hex/RGB input for precise color selection
  • Instant feedback as you adjust colors without clicking any button

よくある質問

詳しく読む