ホーム
Tom Utilities

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

開発者ユーティリティ

WCAG コントラスト比を測定し、通常サイズと大きな文字で AA・AAA を満たすか確認します。

使い方

Check a pair of colors

Pick a foreground and background color. The tool shows the contrast ratio and pass or fail badges for each WCAG level.

  1. Choose the text color.
  2. Choose the background color.
  3. Aim for at least 4.5:1 for normal text.

WCAG thresholds

Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text (18pt or 14pt bold) needs 3:1 for AA and 4.5:1 for AAA.

よくある質問

What counts as large text?

WCAG defines large text as at least 18pt (24px) or 14pt (18.66px) when bold.

Is a higher ratio better?

Yes. A ratio of 21:1 is the maximum, achieved by black text on a white background.

関連ツール

カラーパレット生成 任意の色から淡色、濃色、類似色、補色、トライアドのパレットを生成します。 カラーコンバーター ライブプレビュー付きで色を HEX、RGB、HSL の間で変換します。 CSS グラデーション生成 線形または放射状の CSS グラデーションをライブプレビュー付きで作成し、CSS をコピーできます。 UUID / GUID ジェネレーター ランダムなバージョン4 UUID を生成し、1つずつまたはまとめてコピーします。 ハッシュジェネレーター 任意のテキストの MD5、SHA-1、SHA-256、SHA-512 ダイジェストを計算します。 タイムスタンプ変換 Unix タイムスタンプ、ISO 8601、人間が読める現地日時の間で変換します。