コントラストチェッカー

WCAG アクセシビリティコントラストチェッカー。AA/AAA 準拠・カラー提案・ライブ UI プレビュー付き。

Foreground (Text)

HEX

Background

HEX

Contrast Ratio

14.0:1

Excellent — AAA

✓

AA Large Text

Requires ≥ 3:1

✓

AA Normal Text

Requires ≥ 4.5:1

✓

AAA Large Text

Requires ≥ 4.5:1

✓

AAA Normal Text

Requires ≥ 7:1

Contrast Scale

AA (4.5)

AAA (7)

1:121:1

Live Preview

AppName

HomeAboutContact

Large Heading Text (24px+)

This is normal body text at 16px. Good contrast ensures all users can read your content comfortably, including those with visual impairments. WCAG guidelines define minimum contrast ratios to guarantee readability.

Small text (12px) requires even higher contrast to remain legible.

Link text

Input Label

Placeholder text...

Popular Palettes

アクセシビリティのためのカラーコントラストをチェックする方法

The IT Hustle の無料コントラストチェッカーで、WCAG 2.1のカラーコントラスト準拠を確認しましょう。

1
色を入力するカラーピッカーを使うか、16進数／RGB値を入力して前景色（テキスト）と背景色を設定します。
2
コントラスト比を確認するコントラスト比が自動的に計算されます。WCAG AAでは通常テキストで4.5:1、大きなテキストで3:1が必要です。
3
準拠バッジを確認するWCAG AA通常、AA大、AAA通常、AAA大の各テキスト基準について、合格・不合格のバッジを確認します。
4
不合格の色を修正するコントラストが不合格の場合、最低比率を満たす候補色を使用します。候補をクリックすると即座に適用されます。

よくある質問

WCAG（ウェブコンテンツ・アクセシビリティ・ガイドライン）2.1は、ウェブアクセシビリティに関する国際標準です。視力が低い人や色覚異常のある人にとってテキストが読みやすくなるよう、最低限のコントラスト比を定めています。

AAはほとんどのサイトが満たすべき最低基準です：通常テキストで4.5:1、大きなテキストで3:1。AAAは強化基準です：通常テキストで7:1、大きなテキストで4.5:1。AAAは推奨されますが必須ではない場合もあります。

大きなテキストは18pt（24px）以上、または14pt（18.67px）以上の太字と定義されます。大きなテキストは低いコントラストでも読みやすいため、コントラストの要件が低くなっています。

コントラストチェッカー

Large Heading Text (24px+)

アクセシビリティのためのカラーコントラストをチェックする方法

よくある質問

関連ツール

コントラストチェッカー

Large Heading Text (24px+)

アクセシビリティのためのカラーコントラストをチェックする方法

よくある質問

関連ツール